flutter - 带有 SliverApp 栏的 Home 底部应用栏

Question

嗨，伙计们，我正在尝试将底部应用栏放置到 sliverappbar 所在的页面中，但未成功....

CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          backgroundColor: Colors.purple,
          pinned: false,
          forceElevated: true,
          floating: false,
          title: Text("iBeautik"),
          centerTitle: true,
          actions: <Widget>[
            IconButton(icon: Icon(Icons.apps), onPressed: () {}),
          ],
          expandedHeight: 160,
          flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            background: Image.asset(
              'assets/images/sliverImage.jpg',
              fit: BoxFit.cover,
            ),
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate(
            [
              Container(
                color: Colors.purple,
                child: ListView.builder(

然后是底部栏..

class _BottomNavState extends State<BottomNav> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: navigationDrawer(context),
        floatingActionButton: FloatingActionButton(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(50),
                side: BorderSide(color: Color(0xFF1f2032), width: 2)),
            splashColor: Color(0xFF1f2032),
            backgroundColor: Color(0xfffeaf0d),
            child: Icon(
              Icons.add,
              color: Color(0xFF1f2032),
              size: 25,
            ),
            onPressed: () {
            }),
        floatingActionButtonLocation:
        FloatingActionButtonLocation.centerDocked);
  }

  Widget navigationDrawer(BuildContext context) {
            

标签： flutter

Answer 1

您可以将底部栏设置为bottomNavigationBar的Scaffold并将 添加SilverAppBar为 的主体Scaffold，例如，

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 70,
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                IconButton(
                  iconSize: 30.0,
                  icon: Icon(Icons.home),
                  onPressed: () {
                    setState(() {});
                  },
                ),
                IconButton(
                  iconSize: 30.0,
                  icon: Icon(Icons.search),
                  onPressed: () {
                    setState(() {});
                  },
                ),
                IconButton(
                  iconSize: 30.0,
                  icon: Icon(Icons.add),
                  onPressed: () {
                    setState(() {});
                  },
                ),
                IconButton(
                  iconSize: 30.0,
                  icon: Icon(Icons.notifications),
                  onPressed: () {
                    setState(() {});
                  },
                ),
                IconButton(
                  iconSize: 30.0,
                  icon: Icon(Icons.list),
                  onPressed: () {
                    setState(() {});
                  },
                )
              ],
            ),
          )),
      body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxScrolled) {
            return <Widget>[
              SliverAppBar(
                pinned: true,
                backgroundColor: Colors.deepPurpleAccent,
                title: Text("Silver app bar"),
              ),
            ];
          },
          body: ListView.builder(
              itemCount: itemList.length,
              itemBuilder: (context, index) {
                return Card(
                  child: ListTile(
                    title: Text(itemList[index]),
                  ),
                );
              })),
    );
  }
}

结果：