Question

我是 flutter 的新手，正在尝试在页面上创建一个通用标志。现在我在表单上有 flutter 徽标和 google 签名。我希望在页面底部创建一个“有问题”部分。现在我只想在页面底部添加文本组件。

我遇到了 Expanded Widgets，这似乎满足了我的需要，但实际上它并没有成为我想要的。

我也想在未来添加更多的认证方法，图片会向上推，但底部的文字保持不变

当前代码：

import 'package:flutter/material.dart';
import 'package:gameface_mobile/sign_in.dart';

import 'first_screen.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlutterLogo(size: 150),
              SizedBox(height: 50),
              _signInButton(),
              Expanded(
                child: _faq()
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _signInButton() {
    return OutlineButton(
      splashColor: Colors.grey,
      onPressed: () {
        signInWithGoogle().then((result) {
          if (result != null) {
            print('Result: $result');
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) {
                  return FirstScreen();
                },
              ),
            );
          }
        });
      },
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
      highlightElevation: 0,
      borderSide: BorderSide(color: Colors.grey),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image(image: AssetImage("assets/google_logo.png"), height: 35.0),
            Padding(
              padding: const EdgeInsets.only(left: 10),
              child: Text(
                'Sign in with Google',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.grey,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _faq() {
    return Align(
        alignment: FractionalOffset.bottomCenter,
        child: MaterialButton(
          onPressed: () => {},
          child: Text("FAQ")
        ),
      );
  }
}

Answer 1

Scaffold 也有一个 bottom 属性，就像 body 一样，你也可以在其中传递一个小部件。它将帮助您在屏幕底部放置任何小部件。

Answer 2

您可以使用 stack 小部件。

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          YourBody(),
          Positioned(
            bottom: 0,
            child: TheBottomWidget(),
          )
        ],
      ),
    );
  }
}

屏幕底部的颤动小部件放置

2 个答案: