将按钮移至底部

Question

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

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

如果您在脚手架中，并且想要在屏幕上的固定位置中放置一些按钮，则可以使用FloatingActionButton属性。

示例：

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

当然，FloatingActionButton属性是Mainy用于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
          ),
        ),
      ),
    ),
  ],
),

结果 - ＆gt;

Answer 3

您可以通过在代码中进行少量更改来实现它。您必须如下更改代码树。

Scaffold -> Body -> Column 

1. 第一个孩子应用扩展的孩子包裹，然后将单元旋转，然后列列和剩余的小部件
2. ，第二个小部件应为您的按钮。

这将使按钮移至屏幕末端。我希望这就是您要做的。
但是这样，使屏幕上剩下的小部件将滚动的按钮可见。

Answer 4

假设它包裹在列小部件中，只需使用间隔窗口小部件即可。不确定它的好解决方案是否仍然是初学者。

        const Spacer(),
        Padding(
          padding: const EdgeInsets.all(20.0),
          child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                padding: const EdgeInsets.all(14),
                alignment: Alignment.center,
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(
                    Radius.circular(8),
                  ),
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Color.fromRGBO(59, 110, 231, 1),
                      Color.fromRGBO(41, 77, 162, 1),
                    ],
                  ),
                ),
                child: Text(
                  'Learn more',
                  style: GoogleFonts.openSans(
                    textStyle: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      letterSpacing: -0.32,
                      color: Color.fromRGBO(255, 255, 255, 1),
                    ),
                  ),
                ),
              )),
        ),