Flutter：如何在 ListView 中将按钮置于底部居中？

Question

我需要将 .txt 文件中包含的按钮置于底部居中位置ListView。我所说的底部是指在屏幕的底部，或者如果屏幕内容长于屏幕的高度，则在内容的末尾。

我可以使用小部件来执行此操作，Column因为Spacer高度已定义，但我的屏幕上有文本输入。如果我使用 aColumn而不是 a ListView，则当我打字时屏幕会溢出。

我怎样才能

1. 底部中心有一个按钮，或者
2. 使用 aColumn但可防止打字时屏幕调整大小或溢出；我希望它可以滚动，或者只是在打字时让键盘覆盖屏幕内容。

基本代码示例：

return Scaffold(
      body: Center(
        child: Container(
          width: workingWidth,
          child: Center(
            child: ListView(children: <Widget>[
              ScreenHeader("Tell Us a Little About Yourself"),
              TextFormField(
                maxLines: 16,
                controller: bioController,
                autocorrect: true,
                textCapitalization: TextCapitalization.sentences,
                maxLength: 500,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(paddingH5),
                  focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: colorPrimary)),
                  border: UnderlineInputBorder(
                      borderSide: BorderSide(color: colorMuted)),
                  hintText: "Enter your bio here...",
                  hintStyle: textMuted,
                ),
              ),
              Spacer(), //This doesn't work because I am using a ListView instead of a Column
              RoundedButton(
                  buttonText: 'Continue',
                  buttonStyle: buttonPrimary,
                  onPressed: () {}
            ),
            ],)
          ),
        ),
      ),
    );

Answer 1

Column要在打开键盘时使用无黄/黑条纹错误，您需要将其包装到 a 中SingleChildScrollView，但Spacer如果您不声明其父级的高度，则在这种情况下将不起作用RenderFlex。

您可以使用MediaQuery.of(context).size.height来获取其上下文中的屏幕尺寸并将其设置为您的Container.

最后，您可以通过以下方式实现所需的布局：

return Scaffold(
              body: SingleChildScrollView(
                child: Container(
                  width: workingWidth,
                  height: MediaQuery.of(context).size.height,
                  child: Column(
                    children: <Widget>[
                      ScreenHeader("Tell Us a Little About Yourself"),
                      TextFormField(
                        maxLines: 16,
                        controller: bioController,
                        autocorrect: true,
                        textCapitalization: TextCapitalization.sentences,
                        maxLength: 500,
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.all(paddingH5),
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: colorPrimary)),
                          border: UnderlineInputBorder(
                              borderSide: BorderSide(color: colorMuted)),
                          hintText: "Enter your bio here...",
                          hintStyle: textMuted,
                        ),
                      ),
                      Spacer(),
                      RoundedButton(
                          buttonText: 'Continue',
                          buttonStyle: buttonPrimary,
                          onPressed: () {}
                      ),
                    ],
                  ),
                ),
              ),
            );