Question

我需要使ListView中包含的按钮的底部居中。所谓底部，是指在屏幕的底部，或者如果屏幕内容比屏幕的高度长，请在内容的末尾。

我可以使用带有Column小部件的Spacer来完成此操作，因为定义了高度，但是我的屏幕上有文本输入。如果我使用Column而不是ListView，则在键入时屏幕会溢出。

我怎么能

使按钮居中居中，或者
使用Column，但在键入时防止屏幕调整大小或溢出；我希望它可以滚动，或者在键入时让键盘覆盖屏幕内容。

基本代码示例：

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，您需要将其包装到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: () {}
                      ),
                    ],
                  ),
                ),
              ),
            );

Flutter：如何在ListView的底部使按钮居中？

1 个答案: