我有一个Column,里面有物品,用SingleChildScrollView Package 。除此之外,我需要添加2个按钮停靠在屏幕底部。我如何才能做到这一点?我已经尝试了下面这些解决方案,但它们不适用于我的项目:1.用Align包裹按钮1.用Align和Expanded Package 按钮
Column
SingleChildScrollView
Align
Expanded
ar5n3qh51#
首先,你需要理解为什么Align & Expanded不起作用,因为你有一个singleChildScrollView(或任何垂直scrollView),屏幕的高度是无限的。所以当你试图使用对齐时, Flutter 不知道屏幕的尽头在哪里。
要解决它,您有许多选择:
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')), ], ), ) ], ), );
1条答案
按热度按时间ar5n3qh51#
首先,你需要理解为什么Align & Expanded不起作用,因为你有一个singleChildScrollView(或任何垂直scrollView),屏幕的高度是无限的。所以当你试图使用对齐时, Flutter 不知道屏幕的尽头在哪里。
要解决它,您有许多选择:
使用BottomNavigationBar将按钮放在上面。
使用Stack Widget:(建议)
使用列控件:(定义scrollWidget的高度)