Flutter Scaffold 实现抽屉,浮窗,底部栏,和顶部侧边栏

直接贴代码




import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TestApp2Demo5 extends StatefulWidget{
  
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _TestApp2Demo5State();
  }
}

class _TestApp2Demo5State extends State<TestApp2Demo5> {
  int _currentIndex = 1;
  Widget createLeading(BuildContext context){
    return Builder(builder: (context){
      return IconButton(onPressed: (){
          Scaffold.of(context).openDrawer();
      }, icon: Icon(Icons.share));
    });
  }
  //右侧按钮
  List<Widget> creatAction(BuildContext context){
    return [
      IconButton(onPressed: (){
        print("点击了右侧按钮");
        Navigator.pop(context);
      }, icon: Icon(Icons.list))
    ];
  }

  //浮窗按钮
  Widget creatFloadBtn(BuildContext context){
    return IconButton(onPressed: (){

    }, icon: Icon(Icons.add));
  }

  List<BottomNavigationBarItem> creatBottomItens(BuildContext contex){
    return <BottomNavigationBarItem>[
      BottomNavigationBarItem(icon: Icon(Icons.school),label: "School",backgroundColor: Colors.red),
      BottomNavigationBarItem(icon: Icon(Icons.mark_email_read),label: "Email",backgroundColor: Colors.blue),
      BottomNavigationBarItem(icon: Icon(Icons.person),label: "Mine",backgroundColor: Colors.purple),
    ];
  }


 Widget createShapeBtn(BuildContext context){
    return Container(width: 50,height: 50,color: Colors.red,);
 }
  
  Widget build(BuildContext context) {
    // TODO: implement build
   return Scaffold(
     appBar: AppBar(
       title: Text("Demo5"),
       centerTitle: true,
       backgroundColor: Colors.purple,
       leading: createLeading(context),
       actions: creatAction(context),
     ),
     drawer: TestApp2DemoDrawer(),
     floatingActionButton: creatFloadBtn(context),
     // bottomNavigationBar: BottomNavigationBar(items: creatBottomItens(context),
     // currentIndex: _currentIndex,
     //   onTap: (index){
     //   setState(() {
     //     _currentIndex = index;
     //   });
     //   },
     //   backgroundColor: Colors.green,
     //   selectedItemColor: Colors.red,
     //   unselectedItemColor:Colors.yellow,
     // ),
    bottomNavigationBar: BottomAppBar(
      color: Colors.green,
      shape: CircularNotchedRectangle(),// 底部导航栏打一个圆形的洞
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround, //均匀分
        children: [
          IconButton(onPressed: (){

    }, icon: Icon(Icons.home)),
          SizedBox(),
          IconButton(onPressed: (){}, icon: Icon(Icons.business)),
        ],
      ),
    ),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, //将浮窗按钮固定到打洞位置

   );
  }
}


class TestApp2DemoDrawer extends StatelessWidget{
  
  Widget build(BuildContext context) {
    // TODO: implement build
    return Drawer(
      child: MediaQuery.removePadding(context: context,
          removeTop: true, //移除抽屉菜单顶部默认留白
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(padding: EdgeInsets.only(top: 38.0),
              child: Row(
                children: [
                  Padding(padding: EdgeInsets.symmetric(horizontal: 16.0),
                  child: ClipOval(
                    child: Image.asset("images/image1.jpeg",width: 80,height:80,fit: BoxFit.fill,),
                  ),
                  ),
                  Text("Wendux",style: TextStyle(fontWeight: FontWeight.bold),),

                ],
              ),
              ),
              Expanded(child: ListView(
                children: const [
                  ListTile(leading: Icon(Icons.add),
                    title: Text("Add acount"),),
                  ListTile(leading: Icon(Icons.settings),
                    title: Text("Manage account"),)
                ],
              ))
            ],
          )
      ),
    );
  }
}
### 如何在 Flutter 中创建使用侧边栏导航 Drawer #### 使用 `Drawer` 实现基本的侧边栏导航 为了实现Flutter 应用程序中的侧边栏导航,可以利用内置的小部件 `Drawer` 来完成这一需求。此小部件通常配合 `Scaffold` 一同工作,在应用程序界面的一侧提供一个可滑动出来的菜单。 下面是一个简单的例子,展示了如何集成并配置 `Drawer`: ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Side Menu Example')), body: Center(child: Text('Content goes here!')), drawer: Drawer( // 创建抽屉式导航 child: ListView( padding: EdgeInsets.zero, children: [ DrawerHeader( decoration: BoxDecoration(color: Colors.blue), child: Text('Menu Options'), ), ListTile( title: Text('Item 1'), onTap: () {}, ), ListTile( title: Text('Item 2'), onTap: () {}, ), ], ), ), ), ); } } ``` 这段代码定义了一个带有顶部应用的应用口,并在其左侧加入了一个包含两个选项项 (`Item 1`, `Item 2`) 的简单菜单[^1]。 #### 利用第三方库增强功能 对于更复杂的需求,则可能需要考虑采用一些专门设计用于构建侧边栏导航的插件或包。例如,`flutter_inner_drawer` 提供了一种简便的方式来创建内部侧面部分(左/右),允许插入列表菜单或其他内容;而 `SidebarX` 是另一个流行的多平台侧边栏导航组件,支持流畅动画效果以及更多自定义设置[^2][^3]。 通过这些工具的帮助,开发者可以根据具体应用场景灵活调整样式与交互逻辑,从而打造出更加美观实用的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值