Flutter-Scaffold组件

Flutter开发：使用Scaffold构建页面布局,

最新推荐文章于 2025-07-20 16:49:07 发布

原创

最新推荐文章于 2025-07-20 16:49:07 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

本文介绍了Flutter中的Scaffold组件，用于构建包含悬浮按钮、顶部菜单、侧边栏和底部导航等元素的页面。示例代码展示了如何使用Scaffold创建一个带有AppBar、BottomAppBar、FloatingActionButton的页面，并解释了各属性的用途。

在Flutter开发当中，我们可能会遇到以下的需求：

实现页面组合使用，比如说有悬浮按钮、顶部菜单栏、左右抽屉侧边栏、底部导航栏等等效果。

Scaffold组件可以帮我们实现上面需求说的效果。这篇博客主要分享容器组件的Scaffold组件的使用，希望对看文章的小伙伴有所帮助。

简单示例代码

Scaffold(
      appBar:AppBar(
        title:Text(widget.title),),
      body:Center(
        child:Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children:<Widget>[constText('You have pushed the button this many times:',),Text('$_counter',
              style: Theme.of(context).textTheme.headline4,),],),),
      backgroundColor: Colors.yellow,
      bottomNavigationBar:BottomAppBar(
        color: Colors.white,
        shape:constCircularNotchedRectangle(),
        child:Container(
          height:50,),),
      floatingActionButton:FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip:'Increment',
        child:constIcon(Icons.add),),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,)

效果如下所示：