flutter之Scaffold组件

最新推荐文章于 2025-03-11 08:30:00 发布

原创最新推荐文章于 2025-03-11 08:30:00 发布 · 322 阅读

0 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

9 篇文章

订阅专栏

本文深入讲解Flutter中的Scaffold布局控件，包括其属性如AppBar、FloatingActionButton等的使用方法，以及如何通过resizeToAvoidBottomPadding属性调整界面内容，避免被键盘遮挡。同时，展示了如何设置不同样式的Text组件。

Scaffold 是承载material design 控件的布局控件，可以展示drawers、snack bars、bottom sheets。每个页面的布局都是在这里面。相当于iOS中UIViewController中的self.view。

属性介绍：

属性名	类型	说明
appBar	AppBar	显示在界面顶部的一个AppBar
body	Widget	当前界面所显示的主要内容
floatingActionButton	Widget	在Material Design 中定义的一个功能
persistentFooterButtons	List	固定在下方显示的按钮
drawer	Widget	侧边栏组件
bottomNavigationBar	Widget	显示在底部的导航栏按钮
backgroundColor	Color	当前界面所显示的主要内容
body	Widget	背景色
resizeToAvoidBottomPadding	bool	控制界面内容body是否重新布局来避免底部被覆盖，比如当键盘显示时，重新布局避免被键盘盖住内容。默认值为true

代码：

new Scaffold(
      appBar: new AppBar(
        title: new Text('文本组件'),
      ),
      backgroundColor: Colors.grey,
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50.0,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: '增加',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      body: new Column(
        children: <Widget>[
          new Text(
            '红色+黑色删除线+25号',
            style: new TextStyle(
                color: const Color(0xffff0000),
                decoration: TextDecoration.lineThrough,
                decorationColor: const Color(0xff000000),
                fontSize: 25.0),
          ),
          new Text(
            '橙色+下划线+24号',
            style: new TextStyle(
              color: const Color(0xffff9900),
              decoration: TextDecoration.underline,
              fontSize: 24.0,
            ),
          ),
          new Text(
            '虚线上划线+23号+倾斜',
            style: new TextStyle(
              decoration: TextDecoration.overline,
              decorationStyle: TextDecorationStyle.dashed,
              fontSize: 23.0,
              fontStyle: FontStyle.italic,
            ),
          ),
          new Text(
            '24号+加粗',
            style: new TextStyle(
              fontSize: 23.0,
              fontStyle: FontStyle.italic,
              fontWeight: FontWeight.bold,
              letterSpacing: 6.0,
            ),
          )
        ],
      ),
)