页面骨架Scaffold

Scaffold

脚手架(Scaffold)类是可扩展的窗口小部件，它填充了可用空间或屏幕。它提供了一个API，用于显示应用程序的主要小部件，例如：Drawer，SnackBar，Bottom-Sheet，FloatingActionButton，AppBar和BottomNavigationBar等。Scaffold构造器：

const Scaffold({
    super.key,
    this.appBar,//导航栏
    this.body,//页面主体
    this.floatingActionButton,//页面悬浮按钮
    this.floatingActionButtonLocation,//指定悬浮按钮位置
    this.floatingActionButtonAnimator,//悬浮按钮动画效果
    this.persistentFooterButtons,//固定在下方显示的按钮
    this.persistentFooterAlignment = AlignmentDirectional.centerEnd,//位置
    this.drawer,//抽屉左边
    this.onDrawerChanged,
    this.endDrawer,//抽屉右边
    this.onEndDrawerChanged,
    this.bottomNavigationBar,//底部导航栏
    this.bottomSheet,//底部弹出
    this.backgroundColor,//背景颜色
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,//抽屉宽度
    this.drawerEnableOpenDragGesture = true,
    this.endDrawerEnableOpenDragGesture = true,
    this.restorationId,
  }) 

appBar和 body

class Exp1 extends StatelessWidget {
  const Exp1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('基本用法1'),
      ),
      body: const Text('内容页'),
    );
  }
}

floatingActionButton

floatActionButton是一个浮动到主体(body)表面的按钮。默认情况下，它将漂浮在屏幕的右下角。可以通过floatActionButtonLocation属性指定其位置

 floatingActionButton: FloatingActionButton(
    onPressed: (){},
    child: const Icon(Icons.add),
  ),

floatingActionButtonLocation

floatActionButtonLocation属性用于指定floatActionButton的显示位置。其默认值为FloatingActionButtonLocation.endFloat。

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

floatingActionButtonAnimator

floatActionButtonAnimator属性用于为FloatingActionButton创建动画效果。

 floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,

persistentFooterButtons和 persistentFooterAlignment

persistentFooterButtons是包裹在ButtonBar中并显示在支架底部的按钮列表。即使用户滚动支架的主体，它们也会持续显示。

 //固定在下方显示的按钮
persistentFooterButtons: [
    IconButton(onPressed: (){}, icon: const Icon(Icons.map)),
    IconButton(onPressed: (){}, icon: const Icon(Icons.view_week))
],
固定在下方显示的按钮的位置
persistentFooterAlignment: AlignmentDirectional.bottomCenter,

drawer

抽屉是显示在正文左侧的面板(如果textDirection = TextDirection.ltr)。它通常隐藏在移动设备上，因此需要左右滑动才能显示它。可以将按钮自动添加到AppBar.leading或AppBar.actions中，以帮助用户快速打开抽屉，endDrawer也是一样，只是从右边滑出。

leading: Builder(builder: (context){
  return IconButton(
    onPressed: (){
      Scaffold.of(context).openDrawer();//打开抽屉菜单
    },
    icon: const Icon(Icons.notification_add,color: Colors.white,),
  );
}),

body: const Center(
    child: Text('Hello World'),
),
drawer: MyDrawer(),//引入

class MyDrawer extends StatelessWidget {
  const MyDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: MediaQuery.removePadding(
          context: context,
          child:Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 45.0),
                child: Row(
                  children: [
                    Padding(
                        padding: EdgeInsets.symmetric(horizontal: 16.0),
                        child: ClipOval(
                          child: Image.asset('images/avatar.jpg',width: 60,height: 60,),
                        ),
                    ),
                    const Text(
                      'hedy',
                      style: TextStyle(fontSize: 30.0),
                    )
                  ],
                ),
              ),
              Expanded(
                  child: ListView(
                      children: const [
                        ListTile(
                          leading: Icon(Icons.add),
                          title: Text('Add account'),
                        ),
                        ListTile(
                          leading: Icon(Icons.settings),
                          title: Text('Manage account'),
                        ),
                      ],
                  ),
              )
            ],

          )
      ),
    );
  }
}

bottomNavigationBar

底部导航栏，在大多数使用情况下，它是BottomAppBar或BottomNativationBar的对象。

//BottomAppBar
bottomNavigationBar:  BottomAppBar(
    color: Colors.blue,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        IconButton(icon: const Icon(Icons.home), onPressed: () {},),
        IconButton(icon: const Icon(Icons.book), onPressed: () {},),
        IconButton(icon: const Icon(Icons.person), onPressed: () {},),
      ],
    ),
  ),

//BottomNativationBar
 bottomNavigationBar: BottomNavigationBar(
    currentIndex: 0,
    fixedColor: Colors.green,
    items: const [
      BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label:'Home'
      ),
      BottomNavigationBarItem(
          icon: Icon(Icons.book),
          label:'Book'
      ),
      BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label:'Me'
      ),
    ],
    onTap: (int indexOfItem){

    },
 ),

bottomSheet

常用上拉框

BottomSheet _bottomSheet(context){
  return BottomSheet(
    onClosing: (){
      print("closed");
    },
    builder: (context){
      return Container(
        height: 300,
        color: Colors.yellow,
        alignment: Alignment.centerLeft,
        child: const Text("BottomSheet In Scaffold"),
      );
    },
  );
}