在我的Flutter项目,我有一些图标和文字下面的容器.我希望这整个容器被固定在屏幕底部,而不使用底部导航栏像下面的图片-x1c 0d1x的数据因此,我需要一个完整的例子来修复底部的容器,并将其他组件保持在主体中的滚动视图中。
xzlaal3s1#
好的,给你……
return Scaffold( appBar: AppBar( title: Text("Header"), ), body: Column( children: <Widget>[ Expanded( child: Container( alignment: Alignment.center, child: Text("Hello"), ), ), Container( height: 50, width: double.maxFinite, decoration: BoxDecoration( color: Colors.deepOrange, borderRadius: BorderRadius.vertical(top: Radius.circular(20.0)) ), child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ IconButton(icon: Icon(Icons.arrow_forward), onPressed: (){},), IconButton(icon: Icon(Icons.arrow_downward), onPressed: (){},), IconButton(icon: Icon(Icons.arrow_left), onPressed: (){},), IconButton(icon: Icon(Icons.arrow_upward), onPressed: (){},), ], ), ) ], ), );
字符串
bwitn5fc2#
如果你想在body部分制作一个可滚动的item/listview,并且想要一个固定的底部容器,你可以按照下面给出的代码操作:
重要提示:确保使用Expanded Package listview
导入“包:flutter/materials. dart”;
class ShoppingCart extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey[200], appBar: AppBar( backgroundColor: Colors.white, leading: IconButton( icon: Icon(Icons.arrow_back, color: Colors.black), ), actions: <Widget>[ GestureDetector( onTap: () { //your code }, child: Padding( padding: const EdgeInsets.only(right: 15.0), child: Icon( Icons.delete_outline_sharp, color: Colors.black, size: 30, ), )), //Add more icon here ], elevation: 0, centerTitle: false, title: Text("Shopping Cart", style: TextStyle(color: Colors.black))), body: Column( children: [ Expanded( child: ListView.builder( itemCount: shoppingCartItems.length, itemBuilder: (context, index) { return Padding( padding: const EdgeInsets.only( top: 15.0, left: 12.0, right: 12.0), child: Container( decoration: BoxDecoration( // color: Color(0xffF3F3F3), color: Colors.red, shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.circular(10.0))), height: 120, width: 360, ), ); }, ), ), Container( height: 150, width: double.maxFinite, decoration: BoxDecoration( color: Colors.deepOrange[200], borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))), ) ], )); } }
字符串x1c 0d1x的数据
更新:
现在已经内置,您可以使用bottomNavigationBar自定义如下:
bottomNavigationBar: BottomAppBar( child: Container( height: //set your height here width: double.maxFinite, //set your width here decoration: BoxDecoration( color: Colors.orange, borderRadius: BorderRadius.vertical(top: Radius.circular(20.0)) ), child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ IconButton(icon: Icon(Icons.arrow_forward), onPressed: (){ //on Presses functionaluty goes here },), //add as many tabs as you want here ], ), ), ),
型
k0pti3hp3#
bottomNavigationBar: BottomAppBar( child: Container( height: 50.0, width: double.maxFinite, decoration: BoxDecoration( color: Colors.deepOrange, borderRadius: BorderRadius.vertical(top: Radius.circular(20.0)) ), child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ IconButton(icon: Icon(Icons.arrow_forward), onPressed: (){},), IconButton(icon: Icon(Icons.arrow_downward), onPressed: (){},), IconButton(icon: Icon(Icons.arrow_left), onPressed: (){},), IconButton(icon: Icon(Icons.arrow_upward), onPressed: (){},), ], ), ), ),
np8igboo4#
这是最好的选择,伙计,它已经定义了你需要什么.从更新的文档中:“一个材料小部件,显示在应用程序的底部,用于在少量视图中进行选择,通常在三到五个之间。底部导航栏由文本标签、图标或两者的形式的多个项目组成,布局在一段材料的顶部。它提供了应用程序顶层视图之间的快速导航。”https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
4条答案
按热度按时间xzlaal3s1#
好的,给你……
字符串
bwitn5fc2#
如果你想在body部分制作一个可滚动的item/listview,并且想要一个固定的底部容器,你可以按照下面给出的代码操作:
重要提示:确保使用Expanded Package listview
导入“包:flutter/materials. dart”;
字符串
x1c 0d1x的数据
更新:
现在已经内置,您可以使用bottomNavigationBar自定义如下:
型
k0pti3hp3#
字符串
np8igboo4#
这是最好的选择,伙计,它已经定义了你需要什么.
从更新的文档中:
“一个材料小部件,显示在应用程序的底部,用于在少量视图中进行选择,通常在三到五个之间。
底部导航栏由文本标签、图标或两者的形式的多个项目组成,布局在一段材料的顶部。它提供了应用程序顶层视图之间的快速导航。”
https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html