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,javascript,前端)