Question

我正在尝试创建一个带有一列的SingleChildScrollView，我希望按钮位于屏幕的最底部。为此，我尝试使用将SingleChildScrollView和FlatButton用作子代的堆栈。我最终得到的是这样：

即使我已将按钮定位并对准底部，我也无法将其固定在底部。绿色只是显示列的高度，按钮紧贴在列的底部。 Stack，SingleChildScrollView，Column和FlatButton仅占用显示它们所需的空间。我需要将该按钮粘贴到屏幕底部。

这是我用来创建它的代码。我想念什么？

return Scaffold(
  appBar: AppBar(
    // Here we take the value from the MyHomePage object that was created by
    // the App.build method, and use it to set our appbar title.
    title: Text(widget.title),
  ),
  body: Container(
    width: double.infinity,
    color: Colors.red,
    child: Stack(
      children: <Widget>[
        Container(
          color: Colors.green,
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Protein',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Fat',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Fiber',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Moisture',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Ash',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
              ],
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Align(
            alignment: Alignment.bottomCenter,
            child: ButtonTheme(
              minWidth: double.infinity,
              height: 50,
              child: FlatButton(
                color: Colors.blueAccent.shade400,
                onPressed: () {},
                child: Text(
                  'Calculate Carbs',
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        )
      ],
    ),
  ),
);

编辑：下面给出的两种方法都可以用于扩展Stack以填充整个屏幕。我添加了其他TextField小部件来填充屏幕，然后单击底部的小部件以确保打开键盘时底部小部件可见，并注意到按钮覆盖了底部字段。就像滚动视图通过忽略那里的按钮来向上滚动正确的数量一样。

在下面的图像中，我点击了End Field 3小部件。该按钮将其覆盖，因此我看不到我正在输入的内容。

Answer 1

使用

height: double.infinity,

在您的父母Container

Container(
  width: double.infinity,
  height: double.infinity, // this is what you need
  color: Colors.red,
  child: Stack(...)
)

Answer 2

将此参数添加到堆栈中：fit: StackFit.expand,

Answer 3

带有浮动操作按钮的选项1

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(),
      ),
      floatingActionButton: YourButtonWidget(),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
    );
  }

带有底部导航栏的选项2

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(),
      ),
      bottomNavigationBar: YourButtonWidget(),
    );
  }

Answer 4

这种行为的原因是父容器的大小。只需更改容器大小</ p>

      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        color: Colors.red,
        child: Stack(
          children: <Widget>[

您已经完成。

解释，如果您好奇的话:) 如果我们查看Stack小部件，我们可以找到此描述

   /// By default, the non-positioned children of the stack are aligned by their
  /// top left corners.

因此，此窗口小部件仅占用由父窗口小部件提供的空间。而您使用的容器没有尺寸。所有的子小部件都自动占据了它们的位置，而Alin在这个自动创建的容器中工作。

Answer 5

使用CustomScrollView：

CustomScrollView(
  slivers: [
    SliverFillRemaining(
      hasScrollBody: false,
      child: Column(
        children: <Widget>[
          const Text('Header'),
          Expanded(child: Container(color: Colors.red)),
          const Text('Footer'),
        ],
      ),
    ),
  ],
)

见：https://stackoverflow.com/a/62097942/5164462

Answer 6

始终将按钮保持在底部，

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: new Form(
                  key: _formKey, 
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                         _currntForm()
                      ],
                    )
                  )),
              )),
           Padding(
            padding: const EdgeInsets.all(15.0),
            child: FullWidthIconBotton(
              icon: Icon(LinearIcons.floppy_disk),
              label: 'SAVE',
              color: Colors.green,
              onClick: () {
                _validateFormFields();
              },
            ) ,
          ) 
        ],
      ),
    );
  }

SingleChildScrollView带列，底部需要按钮

6 个答案: