Flutter:如何在SingleChildScrollView底部停靠按钮?

mw3dktmi  于 2023-10-22  发布在  Flutter
关注(0)|答案(1)|浏览(121)

我有一个Column,里面有物品,用SingleChildScrollView Package 。除此之外,我需要添加2个按钮停靠在屏幕底部。我如何才能做到这一点?
我已经尝试了下面这些解决方案,但它们不适用于我的项目:
1.用Align包裹按钮
1.用AlignExpanded Package 按钮

ar5n3qh5

ar5n3qh51#

首先,你需要理解为什么Align & Expanded不起作用,因为你有一个singleChildScrollView(或任何垂直scrollView),屏幕的高度是无限的。所以当你试图使用对齐时, Flutter 不知道屏幕的尽头在哪里。

要解决它,您有许多选择:

  • 使用底部导航栏**
    使用BottomNavigationBar将按钮放在上面。
return Scaffold(
  body: SingleChildScrollView(
    child: Column(
        children: [
          Container(
            height: 200,
            width: 300,
            color: Colors.red,
          ),
          Container(
            height: 400,
            width: 300,
            color: Colors.grey,
          ),
          Container(
            height: 500,
            width: 300,
            color: Colors.green,
          ),
        ],
    ),
  ),
  bottomNavigationBar: Row(
    children: [
      ElevatedButton(onPressed: (){}, child: Text('button1')),
      ElevatedButton(onPressed: (){}, child: Text('button2')),
    ],
  ),
  
);

使用Stack Widget:(建议)

return Scaffold(
  body: Stack(
    children: [
      SingleChildScrollView(
        child: Column(
            children: [
              Container(
                height: 200,
                width: 300,
                color: Colors.red,
              ),
              Container(
                height: 400,
                width: 300,
                color: Colors.grey,
              ),
              Container(
                height: 500,
                width: 300,
                color: Colors.green,
              ),
              /// this height must be same as below container height , 
              /// 10 px added to show background whenever scrolls finished
              const SizedBox(height: 70,)
            ],
        ),
      ),
      Align(
        alignment: AlignmentDirectional.bottomCenter,
        child: Container(height: 60,
        color: Colors.green,
          child: Row(
            children: [
              ElevatedButton(onPressed: (){}, child:const  Text('button1')),
              ElevatedButton(onPressed: (){}, child:const  Text('button2')),
            ],
          ),
        ),
      )
    ],
  ),
);

使用列控件:(定义scrollWidget的高度)

Scaffold(
  body: Column(
    children: [
      SizedBox(
        height: MediaQuery.sizeOf(context).height *.5,
        child: SingleChildScrollView(
          child: Column(
              children: [
                Container(
                  height: 200,
                  width: 300,
                  color: Colors.red,
                ),
                Container(
                  height: 400,
                  width: 300,
                  color: Colors.grey,
                ),
                Container(
                  height: 500,
                  width: 300,
                  color: Colors.green,
                ),
              ],
          ),
        ),
      ),
      Container(
      color: Colors.green,
        child: Row(
          children: [
            ElevatedButton(onPressed: (){}, child:const  Text('button1')),
            ElevatedButton(onPressed: (){}, child:const  Text('button2')),
          ],
        ),
      )
    ],
  ),
);

相关问题