Flutter Scaffold API解析笔记

Scaffold 笔记内容大纲

1. Scaffold.appBar 属性

AppBar 的属性图

一般由 AppBar() 控件作为参数传入，是放在屏幕顶部并且拥有固定高度的一个控件。

AppBar 有一个 bottom属性，传入TabBar ()实例，可以快速实现如下“新闻-历史-图片”切换导航效果：

bottom 属性的作用

// 主要代码
class _ScaffoldRouteState extends State
    with SingleTickerProviderStateMixin {

  TabController _tabController; //需要定义一个Controller
  List tabs = ["新闻", "历史", "图片"];

  @override
  void initState() {
    super.initState();
    // 创建Controller  
    _tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        ... //省略无关代码
        bottom: TabBar(   //生成Tab菜单
          controller: _tabController,
          tabs: tabs.map((e) => Tab(text: e)).toList()
        ),
      ),
      ... //省略无关代码

  }

---

2. Scaffold.bottomNavigationBar 属性

• 情况一：使用 BottomNavigationBar()作为参数，是最常用的一种方法。实现的 UI 效果如下。
  
  BottomNavigationBar

// 主要代码如下：
 return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );

• 情况二：使用 BottomAppBar() 和 floatingActionButton() 构建如下页面：
  
  中间带有大按钮的页面结构

// 主要代码如下：
return Scaffold(
      appBar: AppBar(
        title: Text('Sample Code'),
      ),
      body: Center(
        child: Text('You have pressed the button $_count times.'),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child: Row(
          children: [
            IconButton(icon: Icon(Icons.home)),
            SizedBox(),
            IconButton(icon: Icon(Icons.business))
          ],
          mainAxisAlignment: MainAxisAlignment.spaceAround,
        )
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          _count++;
        }),
        tooltip: 'Increment Counter',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );

---

3. Scaffold.draw 属性

一般将 Draw() 作为参数传入，此时 Scaffold 会自动将 AppBar 的 leading 设置为菜单按钮，点击便可打开抽屉菜单。如果我们想要自定义菜单图标，可以手动设置 leading。

drawer 效果图