Flutter Scaffold

Scaffold组件详解

最新推荐文章于 2025-09-24 13:14:41 发布

原创最新推荐文章于 2025-09-24 13:14:41 发布 · 998 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter Scaffold

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍了Flutter中Scaffold组件的各项参数及其用法，包括头部导航栏(appBar)、主体(body)、悬浮按钮(floatingActionButton)等，并通过示例代码展示了如何使用这些属性来构建界面。

参数详解

属性	说明
appBar	头部导航栏
body	主体
floatingActionButton	悬浮按钮
floatingActionButtonLocation	悬浮按钮位置
floatingActionButtonAnimator	悬浮按钮动画
persistentFooterButtons	显示在底部的一组按钮
drawer	侧拉抽屉菜单
endDrawer	侧拉抽屉菜单与上面属性相反
bottomNavigationBar	显示在底部的导航栏
bottomSheet	要显示的持久底部工作表
backgroundColor	背景颜色
resizeToAvoidBottomPadding	已废弃
resizeToAvoidBottomInset	为true时：浮动小部件自动调整，以避免弹出键盘时被遮盖
primary	默认true
drawerDragStartBehavior	默认DragStartBehavior.start
extendBody	默认false
drawerScrimColor	抽屉打开时用来遮盖主要内容的涂布颜色

代码示例

Scaffold(
      appBar: AppBar(
        title: Text('我是appBar'),
      ),
      body: Align(alignment: Alignment.center,child: Text('我是body'),),
      floatingActionButton: FloatingActionButton(child: Text('点我'),
        onPressed: () {},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      // floatingActionButtonAnimator: ,
      persistentFooterButtons: [
        IconButton(icon:Icon(Icons.add),onPressed: () {},),
        FlatButton(child: Text('哈哈'),
          onPressed: () {},),
        RaisedButton(
          child: Text('我是',style: TextStyle(color: Colors.white),),
          onPressed: () {},
        ),
        RaisedButton(
          child: Text('底部',style: TextStyle(color: Colors.white),),
          onPressed: () {},
        ),
        RaisedButton(
          child: Text('按钮',style: TextStyle(color: Colors.white),),
          onPressed: () {},
        )
      ],
      drawer: Drawer(child: Align(alignment: Alignment.center,child: Text('我是drawer'),),),
      endDrawer: Drawer(child: Align(alignment: Alignment.center,child: Text('我是endDrawer'),),),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home), 
            title: Text('首页')
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category), 
            title: Text('分类')
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings), 
            title: Text('设置')
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle), 
            title: Text('我的')
          ),
        ]
      ),
      bottomSheet: Text('我是bottomSheet'),
      backgroundColor: Colors.blue[100],
      // resizeToAvoidBottomPadding: ,
      resizeToAvoidBottomInset: true,
      primary: true,
      // drawerDragStartBehavior: DragStartBehavior.start,
      // extendBody: false,
      drawerScrimColor: Colors.red[100],
    );

效果图