将按钮移至底部

Question

我试图将按钮移至屏幕底部但徒劳。我基本上有 2 个 textEditingController 和一个按钮，但后者一直坚持使用 textEditingController。请问有什么建议吗？

return Scaffold(
      
      body: SafeArea(
        child: SingleChildScrollView(
          physics: const ScrollPhysics(),
          child: Column(
            children: [
                
              return Card(
                 elevation: 5,
                 clipBehavior: Clip.antiAlias,
                 margin: const EdgeInsets.all(0),
                 child: Container(
                 padding: const EdgeInsets.all(15),
                 child: Row(
                   children: [
                    Column(
                    
         ),
         Expanded(
          child: Column(
          children: [
            LocationField(
                isDestination: false,
                textEditingController: sourceController),
            LocationField(
                isDestination: true,
                textEditingController: destinationController),
            
          ],
         ),
        ),   
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  margin: const EdgeInsets.all(5),
                  width: double.infinity,
                  child: ElevatedButton(
                    onPressed: () {},
                    child: const Text('Bottom Button '),  // trying to move to the bottom
                  ),
                ),
              )


            ],
        
         

    );
  }

我哪里错了？

Answer 1

如果您在 Scaffold 中并且希望在屏幕上的固定位置有一些 Button，您可以使用 floatActionButton 属性。

示例：

Scaffold(
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerFloat,
      floatingActionButton: Container(
        height: 50,
        margin: const EdgeInsets.all(10),
        child: ElevatedButton(
          onPressed: () {},
          child: const Center(
            child: Text('Hello'),
          ),
        ),
      ),
    );

当然，floatingActionButton 属性主要用于 FloatingActionButton，但很高兴知道您可以在其中放置任何小部件（其他类型的按钮、行、列等）。要定位此小部件，您可以使用“floatingActionButtonLocation”脚手架属性。

Answer 2

尝试下面的代码

Column(
  children: <Widget>[
    Card(
      elevation: 5,
      clipBehavior: Clip.antiAlias,
      margin: const EdgeInsets.all(0),
      child: Container(
        padding: const EdgeInsets.all(15),
        child: Row(
          children: [
            Expanded(
              child: Column(
                children: [
                  Container(
                    width: 100,
                    height: 50,
                    color: Colors.red,
                  ),
                  Container(
                    height: 50,
                    width: 100,
                    color: Colors.black,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
    Expanded(
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          margin: const EdgeInsets.all(5),
          width: double.infinity,
          child: ElevatedButton(
            onPressed: () {},
            child: const Text(
                'Bottom Button '), // trying to move to the bottom
          ),
        ),
      ),
    ),
  ],
),

结果->

Answer 3

您可以通过对代码本身进行一些小的更改来实现它。您必须如下更改代码树。

Scaffold -> Body -> Column 

1. Column First Child 应该用 Expanded 包裹，然后是 SinglechildScrollView，然后是 Column 和剩余的 Widgets
2. 第二个小部件应该是您的按钮。

这将使按钮移动到屏幕的末尾。我希望这就是您正在尝试做的事情。 但这种方式使按钮始终在屏幕上可见，而其余的小部件将滚动。

Answer 4

假设它被包装在一个列小部件中，只需使用 Spacer 小部件。不太确定它是否是一个好的解决方案我还是一个初学者。