10 Flutter UI 之抽屉侧边栏

最新推荐文章于 2024-12-19 11:22:59 发布

原创

最新推荐文章于 2024-12-19 11:22:59 发布 · 342 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

文章介绍了如何在Flutter应用中使用scaffold组件创建左右侧边栏，包括DrawerHeader的装饰和列表项，并展示了侧边栏的导航功能，如关闭侧边栏及跳转至/search页面。

一抽屉侧边栏

在scaffold 组件中可以定义左右边栏

// 左边的侧边栏

        drawer: Drawer(child: Center(child: Text("左边的"))),
        // 右边的侧边栏
        endDrawer: Drawer(child: Center(child: Text("右边的"))),

二 DrawHeader

       // 左边的侧边栏
        drawer: Drawer(
            child: Column(
          children: [
            //
            DrawerHeader(
              // 装饰的属性
              decoration: BoxDecoration(
                  image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(
                          "https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"))),
              child: Text("我是抽屉头部"),
            ),

            L