如何在 Flutter 中设置一个 Button 或 Text Widget 在屏幕底部

Question

我正在尝试在 Flutter 中创建一个 LoginPage。我只想放置“服务条款。隐私政策”。 Flatbutton 在屏幕的末尾。我尝试了很多东西，但似乎没有任何效果！

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expense Tracker',
      home: LoginPage(),
    );
  }
}

class LoginPage extends StatefulWidget {
  // String titleInput;
  // String amountInput;
  @override
  _LoginPage createState() => _LoginPage();
}

class _LoginPage extends State<LoginPage> {
  final userName = TextEditingController();
  final password = TextEditingController();
  String textDisplay = "";

  void onSubmit() {
    setState(() {
      if (userName == null) {
        textDisplay = "Invalid Username";
      } else if (password == null && userName != null) {
        textDisplay = "Invalid Password";
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LOGIN'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.all(10),
              child: Image.asset("assets/images/nike.png"),
            ),
            Container(
              padding: EdgeInsets.all(10),
              child: Column(
                children: [
                  TextField(
                    controller: userName,
                    decoration: InputDecoration(
                      labelText: "Username",
                      labelStyle: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),
                    keyboardType: TextInputType.emailAddress,
                    onSubmitted: (_) => onSubmit(),
                  ),
                  TextField(
                    controller: password,
                    decoration: InputDecoration(
                      labelText: "Password",
                      labelStyle: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),
                    keyboardType: TextInputType.visiblePassword,
                    onSubmitted: (_) => onSubmit(),
                  ),
                  Text(
                    textDisplay,
                    style: TextStyle(
                      color: Colors.redAccent[700],
                    ),
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      FlatButton(
                        child: Text(
                          "Not a User. Sign Up Here.",
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 15,
                          ),
                        ),
                        onPressed: () {},
                      ),
                      FlatButton(
                        child: Text(
                          "Terms of Service. Privacy Policy.",
                          style: TextStyle(
                            color: Colors.grey[700],
                            fontSize: 13,
                          ),
                        ),
                        onPressed: () {},
                      ),
                    ],
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

SetState(() {})也不行！由于我还在学习 Flutter，请也解释一下答案。

如果我的代码有任何好的更改以使我的应用程序更好，请提出建议。

Answer 1

如果你将列的内容分成两个子元素并使用mainAxisAlignment: MainAxisAlignment.spaceBetween，你会得到想要的结果，因为setState部分TextEditingController()有一个文本属性。您还需要将 SingleChildScrollView() 与 CustomScrollView 交换，按照此答案：https://stackoverflow.com/a/62097942/13315601

查看下面的修改后的代码：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expense Tracker',
      home: LoginPage(),
    );
  }
}

class LoginPage extends StatefulWidget {
  // String titleInput;
  // String amountInput;
  @override
  _LoginPage createState() => _LoginPage();
}

class _LoginPage extends State<LoginPage> {
  final userName = TextEditingController();
  final password = TextEditingController();
  String textDisplay = "";

  void onSubmit() {
    setState(() {
      print(userName.text);
      if (userName.text.length == 0) {
        textDisplay = "Invalid Username";
      } else if (password.text.length == 0 && userName.text.length > 0) {
        textDisplay = "Invalid Password";
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LOGIN'),
      ),
      body: CustomScrollView(slivers: [
        SliverFillRemaining(
          hasScrollBody: false,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Padding(
                padding: EdgeInsets.all(10),
                child: Column(
                  children: [
                    Image.asset("assets/images/nike.png"),
                    TextField(
                      controller: userName,
                      decoration: InputDecoration(
                        labelText: "Username",
                        labelStyle: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.black,
                        ),
                      ),
                      keyboardType: TextInputType.emailAddress,
                      onSubmitted: (_) => onSubmit(),
                    ),
                    TextField(
                      controller: password,
                      decoration: InputDecoration(
                        labelText: "Password",
                        labelStyle: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.black,
                        ),
                      ),
                      keyboardType: TextInputType.visiblePassword,
                      onSubmitted: (_) => onSubmit(),
                    ),
                    Text(
                      textDisplay,
                      style: TextStyle(
                        color: Colors.redAccent[700],
                      ),
                    ),
                  ],
                ),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  FlatButton(
                    child: Text(
                      "Not a User. Sign Up Here.",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 15,
                      ),
                    ),
                    onPressed: () {},
                  ),
                  FlatButton(
                    child: Text(
                      "Terms of Service. Privacy Policy.",
                      style: TextStyle(
                        color: Colors.grey[700],
                        fontSize: 13,
                      ),
                    ),
                    onPressed: () {},
                  ),
                ],
              )
            ],
          ),
        )
      ]),
    );
  }
}

如果您想正确验证用户名和密码，您应该使用表单验证，例如：https://flutter.dev/docs/cookbook/forms/validation