dart 如何在Flutter中显示固定在屏幕底部的容器,而不使用底部导航栏?

5kgi1eie  于 2024-01-04  发布在  Flutter
关注(0)|答案(4)|浏览(180)

在我的Flutter项目,我有一些图标和文字下面的容器.我希望这整个容器被固定在屏幕底部,而不使用底部导航栏像下面的图片-
x1c 0d1x的数据
因此,我需要一个完整的例子来修复底部的容器,并将其他组件保持在主体中的滚动视图中。

xzlaal3s

xzlaal3s1#

好的,给你……

  1. return Scaffold(
  2. appBar: AppBar(
  3. title: Text("Header"),
  4. ),
  5. body: Column(
  6. children: <Widget>[
  7. Expanded(
  8. child: Container(
  9. alignment: Alignment.center,
  10. child: Text("Hello"),
  11. ),
  12. ),
  13. Container(
  14. height: 50,
  15. width: double.maxFinite,
  16. decoration: BoxDecoration(
  17. color: Colors.deepOrange,
  18. borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
  19. ),
  20. child: Row(
  21. mainAxisSize: MainAxisSize.max,
  22. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  23. children: <Widget>[
  24. IconButton(icon: Icon(Icons.arrow_forward), onPressed: (){},),
  25. IconButton(icon: Icon(Icons.arrow_downward), onPressed: (){},),
  26. IconButton(icon: Icon(Icons.arrow_left), onPressed: (){},),
  27. IconButton(icon: Icon(Icons.arrow_upward), onPressed: (){},),
  28. ],
  29. ),
  30. )
  31. ],
  32. ),
  33. );

字符串

展开查看全部
bwitn5fc

bwitn5fc2#

如果你想在body部分制作一个可滚动的item/listview,并且想要一个固定的底部容器,你可以按照下面给出的代码操作:

重要提示:确保使用Expanded Package listview

导入“包:flutter/materials. dart”;

  1. class ShoppingCart extends StatelessWidget {
  2. @override
  3. Widget build(BuildContext context) {
  4. return Scaffold(
  5. backgroundColor: Colors.grey[200],
  6. appBar: AppBar(
  7. backgroundColor: Colors.white,
  8. leading: IconButton(
  9. icon: Icon(Icons.arrow_back, color: Colors.black),
  10. ),
  11. actions: <Widget>[
  12. GestureDetector(
  13. onTap: () {
  14. //your code
  15. },
  16. child: Padding(
  17. padding: const EdgeInsets.only(right: 15.0),
  18. child: Icon(
  19. Icons.delete_outline_sharp,
  20. color: Colors.black,
  21. size: 30,
  22. ),
  23. )),
  24. //Add more icon here
  25. ],
  26. elevation: 0,
  27. centerTitle: false,
  28. title:
  29. Text("Shopping Cart", style: TextStyle(color: Colors.black))),
  30. body: Column(
  31. children: [
  32. Expanded(
  33. child: ListView.builder(
  34. itemCount: shoppingCartItems.length,
  35. itemBuilder: (context, index) {
  36. return Padding(
  37. padding: const EdgeInsets.only(
  38. top: 15.0, left: 12.0, right: 12.0),
  39. child: Container(
  40. decoration: BoxDecoration(
  41. // color: Color(0xffF3F3F3),
  42. color: Colors.red,
  43. shape: BoxShape.rectangle,
  44. borderRadius:
  45. BorderRadius.all(Radius.circular(10.0))),
  46. height: 120,
  47. width: 360,
  48. ),
  49. );
  50. },
  51. ),
  52. ),
  53. Container(
  54. height: 150,
  55. width: double.maxFinite,
  56. decoration: BoxDecoration(
  57. color: Colors.deepOrange[200],
  58. borderRadius:
  59. BorderRadius.vertical(top: Radius.circular(20.0))),
  60. )
  61. ],
  62. ));
  63. }
  64. }

字符串
x1c 0d1x的数据

更新:

现在已经内置,您可以使用bottomNavigationBar自定义如下:

  1. bottomNavigationBar: BottomAppBar(
  2. child: Container(
  3. height: //set your height here
  4. width: double.maxFinite, //set your width here
  5. decoration: BoxDecoration(
  6. color: Colors.orange,
  7. borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
  8. ),
  9. child: Row(
  10. mainAxisSize: MainAxisSize.max,
  11. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  12. children: <Widget>[
  13. IconButton(icon: Icon(Icons.arrow_forward), onPressed: (){
  14. //on Presses functionaluty goes here
  15. },),
  16. //add as many tabs as you want here
  17. ],
  18. ),
  19. ),
  20. ),

展开查看全部
k0pti3hp

k0pti3hp3#

  1. bottomNavigationBar: BottomAppBar(
  2. child: Container(
  3. height: 50.0,
  4. width: double.maxFinite,
  5. decoration: BoxDecoration(
  6. color: Colors.deepOrange,
  7. borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
  8. ),
  9. child: Row(
  10. mainAxisSize: MainAxisSize.max,
  11. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  12. children: <Widget>[
  13. IconButton(icon: Icon(Icons.arrow_forward), onPressed: (){},),
  14. IconButton(icon: Icon(Icons.arrow_downward), onPressed: (){},),
  15. IconButton(icon: Icon(Icons.arrow_left), onPressed: (){},),
  16. IconButton(icon: Icon(Icons.arrow_upward), onPressed: (){},),
  17. ],
  18. ),
  19. ),
  20. ),

字符串

展开查看全部
np8igboo

np8igboo4#

这是最好的选择,伙计,它已经定义了你需要什么.
从更新的文档中:
“一个材料小部件,显示在应用程序的底部,用于在少量视图中进行选择,通常在三到五个之间。
底部导航栏由文本标签、图标或两者的形式的多个项目组成,布局在一段材料的顶部。它提供了应用程序顶层视图之间的快速导航。”
https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

相关问题