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

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

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

xzlaal3s

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: (){},),
              ],
            ),
          )
        ],
      ),
    );

字符串

bwitn5fc

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
            ],
          ),
        ),
      ),

k0pti3hp

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: (){},),
        ],
      ),
    ),
  ),

字符串

np8igboo

np8igboo4#

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

相关问题