【Flutter】基础组件【03】Scaffold
1. 写在前面
在上篇文章中介绍了Flutter中的Container组件，今天继续学习【Flutter】基础组件中的Scaffold组件。
- 【基础语法合集】
【Flutter】Dart中的var、final 和 const基本使用
【Flutter】Dart数据类型之num
【Flutter】Dart数据类型之String
【Flutter】Dart的数据类型list&Map(数组和字典)
【Flutter】Dart的方法与箭头函数
【Flutter】Dart的方法中的可选参数、方法作为参数传递
【Flutter】Dart中的匿名函数、闭包
【Flutter】Dart中的类和对象
【Flutter】Dart中的构造函数
【Flutter】Dart的工厂构造方法&单例对象&初始化列表
【Flutter】Dart的类方法和对象操作符
【Flutter】Dart中的继承
【Flutter】Dart中的抽象类和接口
【Flutter】Dart中的Mixins混入你知道是什么吗？
- [基础组件合集]
【Flutter】基础组件【01】Text
【Flutter】基础组件【02】Container
2. 什么是Scaffold？
Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。
2.1 主要的属性
- appBar：显示在界面顶部的一个 AppBar
- body：当前界面所显示的主要内容
- floatingActionButton： 在 Material 中定义的一个功能按钮。
- persistentFooterButtons：固定在下方显示的按钮。
- drawer：侧边栏控件
- bottomNavigationBar：显示在底部的导航栏按钮栏。
- backgroundColor：背景颜色
- resizeToAvoidBottomPadding： 控制界面内容 body
是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。
2.2 代码举例
import 'package:flutter/material.dart';
void main(){runApp(App());}
class App extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(home: Home());}}class _Home extends State<Home> {int _index = 0;@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text("ScaffoldDemo"),),body: MyWidget(),
);}}
- 自定义Widget
//自定义一个Widget，StatelessWidget无状态的，StatefulWidget
class MyWidget extends StatelessWidget{@overrideWidget build(BuildContext context) {return const Center(child: const Text("Hello World!",textDirection:TextDirection.ltr,style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold,color: Colors.red,),),);}}
- 代码运行结果
- bottomNavigationBar
class _Home extends State<Home> {int _index = 0;@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text("ScaffoldDemo"),),body: MyWidget(),bottomNavigationBar: BottomNavigationBar(items: [BottomNavigationBarItem(icon: Icon(Icons.home,color: _index == 0 ? Colors.green : Colors.grey,),label: "首页",),BottomNavigationBarItem(icon: Icon(Icons.add,color: _index == 1 ? Colors.green : Colors.grey,),label:"添加好友",),BottomNavigationBarItem(icon: Icon(Icons.people,color: _index == 2 ? Colors.green : Colors.grey,),label:"我的",)],currentIndex: _index,//BottomNavigationBar 的点击事件onTap: (flag) {print("flag = $flag");setState(() {_index = flag;//切换});},),);}}
bottomNavigationBar相当于OC的Tabbar
更详细的
Scaffold的内容看这里https://api.flutter.dev/flutter/material/Scaffold-class.html
3. 写在后面
关注我，更多内容持续输出
- CSDN
- 掘金
- 简书
【Flutter】基础组件【03】Scaffold相关推荐
- 一份超级详细的Flutter基础组件练习示例，请查收！
学习B站技术胖的flutter基础课程整理的示例,为了平时方便查阅,同时希望能和大家一同进步~ Flutter基础组件 Hello world import 'package:flutter/mate ...
- Flutter 基础组件之 Text
终于安装好了 Flutter 的环境,既然入了坑,就一点一点学吧,Flutter 可以说一切皆组件吧,所以要熟练掌握各个基础组件的 API,然后才能在面对复杂需求的时候才能得心应手的将各个组件组合起来 ...
- 【Flutter -- 基础组件】Flutter 导航栏
文章目录 1. TabBar 1.1 代码 1.2 效果图 2. BottomNavigationBar 2.1 构建底部标签 2.2 创建导航栏 2.3 效果图 1. TabBar Flutter ...
- Flutter 基础组件之 Container
官方简介中,说 Container 组件是一个方便绘制.定位和调整子组件大小的组件. 首先 Container 会在 child 子组件周围填充 padding(包括 decoration 中存在的 ...
- Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用
提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见 学习Dart 基础知识 移步这里 安装flutter环境相关 移步这里 flutter基础组件使用相关 移步这里 文章目录 一 ...
- Flutter基础布局组件及实现
https://www.cnblogs.com/lxlx1798/p/11084904.html 一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Paddi ...
- Flutter(四)——基础组件
本文目录 前言 基础组件 Text 常用属性使用 Icon Image Button FlutterLogo 前言 你如果做过Android开发,那一定熟悉里面各种官方提供的布局,比如LinearLa ...
- 浅识Flutter 基本组件Scaffold
浅识Flutter 基本组件Scaffold 1. body 2. backgroundColor 3. appBar Scaffold是Flutter开发中实现Material Design布局结构 ...
- 浅识Flutter 基本组件Scaffold的 drawer属性 app创建头像
浅识Flutter 基本组件Scaffold的 drawer属性 app创建头像 在项目开发中使用本地图片资源文件的步骤. 1.在项目下创建一个文件夹image 2.将本地图片放入images文件夹里 ...
- 围观窗体与组件03 - 零基础入门学习Delphi25
围观窗体与组件03 让编程改变世界 Change the world by program 围观按钮型组件 Button.BitBtn.SpeedButton的一些区别 区别一:Button 不能显示 ...
最新文章
- Android intent 接受值的内容为空
- 计算机改名后无法上网,CDEF磁盘分区无法修改名字修复方法
- python pip install pipenv失败_pipenv 无法创建依赖情况应该怎么处理？大家有什么好的建议吗？...
- 使用Scrapy框架发送POST请求
- [蓝桥杯2016决赛]一步之遥-枚举
- 双向链表的(CRUD)
- 怎么看表_干货 | 剪力墙、柱、板配筋率到底怎么算？
- python列表添加元素到中间_python在列表的元素中间插入空行
- php 文件限制,PHP 创建文件的文件名限制
- 加载gif图片的方法：（需要SDWebImage方法）
- JAVA Reflection（反射机制）
- 关于 Vue.js：那些好的，不怎么样的和糟糕的
- JavaScript 基础--- (正则表达式 / 事件监听与绑定)
- 凸优化第四章凸优化问题 4.5 几何规划
- 数字化成熟度评估模型一文读尽
- python数据分析之朴素贝叶斯实践
- objective-c类别catagory的作用？
- outlook企业邮箱服务器要多少钱,如何用OUTLOOK使用企业邮箱
- chromecast网络访问受限
- 使用 Vue3 + elementPlus 做一个每日习惯打卡表
热门文章