Flutter中的Scaffold组件

本文介绍了Scaffold组件在Flutter中的应用,它是Material Design风格的基础布局元素,用于创建符合设计规范的界面。文章详细讲解了Scaffold的属性,并提供了源码解析和实际使用示例。
摘要由CSDN通过智能技术生成

概述

在开始说明Scaffold组件之前,先大致讲述一下Material Design风格。Material Design也成为纸墨设计风格,是由Google退出的全新的设计语言,这种设计语言旨在为手机、平板电脑、台式机和其他平台提供更一致、更广泛的外观和感觉,它是一种非常有质感的设计风格,并会提供一些默认的交互动画。

Scaffold实现了基本的Material Design布局。只要是在Material Design中定义过的单个界面实现的布局元素,都可以使用Scaffold来绘制。

Scaffold属性

Scaffold常用的属性如下:

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

源码

class Scaffold extends StatefulWidget {
  const Scaffold({
    Key key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.endDrawer,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomPadding,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = D
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值