Flutter Scaffold脚手架

Flutter Scaffold

概述

Flutter Material组件库提供了丰富多样的组件，其中Scaffold是路由页的骨架，可以设置导航栏、抽屉菜单、底部Tab导航栏、悬浮按钮等。

AppBar 顶部导航栏

leading：设置导航栏最左侧的Widget。

automaticallyImplyLeading：当leading为null时，是否使用默认的leading按钮。

title：AppBar标题。

actions：导航栏右侧菜单。

centerTitle：标题是否居中。

backgroundColor：标题栏颜色。

Scaffold(
    //顶部导航栏
    appBar: AppBar(
        title: Text(widget.title),
        actions: [
            IconButton(icon: const Icon(Icons.share), onPressed: () {}),
        ],
    ),   
);

appBar: AppBar(
    title: Text("第二页"),
    centerTitle: true,
    actions: [
        IconButton(icon: const Icon(Icons.add), onPressed: () {}),
        IconButton(icon: const Icon(Icons.delete), onPressed: () {}),
    ],
)

Drawer 抽屉菜单

Scaffold(
    //抽屉菜单
    drawer: MyDrawer(),
);

class MyDrawer extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Drawer(
            child: MediaQuery.removePadding(
                context: context,
                // removeTop: true, //删除
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                        Padding(
                            padding: const EdgeInsets.only(top: 38),
                            child: Row(
                                children: [
                                    Padding(
                                        padding: EdgeInsets.symmetric(horizontal: 16),
                                        child: ClipOval(
                                            child: Image.asset(
                                                "images/logo.png",
                                                width: 80,
                                            ),
                                        ),
                                    ),
                                    Text(
                                        "hello world",
                                        style: TextStyle(fontWeight: FontWeight.bold),
                                    ),
                                ],
                            ),
                        ),
                        Expanded(
                            child: ListView(
                                children: [
                                    ListTile(
                                        leading: Icon(Icons.looks_two),
                                        title: Text("跳转第二页"),
                                        onTap: () {
                                            Navigator.push(
                                                context,
                                                MaterialPageRoute(builder: (context) {
                                                    return TwoPage();
                                                }),
                                            );
                                        },
                                    ),
                                    ListTile(
                                        leading: Icon(Icons.account_box),
                                        title: Text("账号"),
                                    ),
                                    ListTile(
                                        leading: Icon(Icons.settings),
                                        title: Text("设置"),
                                    ),
                                    ListTile(
                                        leading: Icon(Icons.close),
                                        title: Text("关闭抽屉菜单"),
                                        onTap: () {
                                            Scaffold.of(context).openEndDrawer();
                                        },
                                    ),
                                ],
                            ),
                        ),
                    ],
                ),
            ),
        );
    }
}

FloatingActionButton 浮动按钮

floatingActionButton：定义一个浮动按钮。

floatingActionButtonLocation：设置浮动位置。

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

底部Tab导航栏

Scaffold(
    bottomNavigationBar: MyBottomNavigationBar(),
)

class MyBottomNavigationBar extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
        return _MyBottomNavigationBarState();
    }
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
    int _selectedIndex = 0;

    @override
    Widget build(BuildContext context) {
        return BottomNavigationBar(
            items: const [
                BottomNavigationBarItem(
                    icon: Icon(Icons.home),
                    label: "home",
                ),
                BottomNavigationBarItem(
                    icon: Icon(Icons.business),
                    label: "business",
                ),
                BottomNavigationBarItem(
                    icon: Icon(Icons.school),
                    label: "school",
                ),
            ],
            currentIndex: _selectedIndex,
            //fixedColor: Colors.blue,
            selectedItemColor: Colors.red,
            unselectedItemColor: Colors.grey,
            onTap: (index) {
                setState(() {
                    _selectedIndex = index;
                });
            },
        );
    }
}

Scaffold(
    bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        shape: CircularNotchedRectangle(),
        child: Row(
            children: [
                IconButton(icon: Icon(Icons.home), onPressed: () {}),
                SizedBox(),
                IconButton(icon: Icon(Icons.business), onPressed: () {}),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceAround,
        ),
    ),
    //悬浮按钮
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {},
    ),
)