本节目标

  • MaterialApp
  • Scafford
  • Scaffold.of

MaterialApp

Material 风格的程序的构建,如 Key 导航 路由 首页 样式 多语言 调试

  • 构造
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const MaterialApp({
Key key,
// 导航键 , key的作用提高复用性能
this.navigatorKey,
// 主页
this.home,
// 路由
this.routes = const <String, WidgetBuilder>{},
// 初始命名路由
this.initialRoute,
// 路由构造
this.onGenerateRoute,
// 未知路由
this.onUnknownRoute,
// 导航观察器
this.navigatorObservers = const <NavigatorObserver>[],
// 建造者
this.builder,
// APP 标题
this.title = '',
// 生成标题
this.onGenerateTitle,
// APP 颜色
this.color,
// 样式定义
this.theme,
// 主机暗色模式
this.darkTheme,
// 样式模式
this.themeMode = ThemeMode.system,
// 多语言 本地化
this.locale,
// 多语言代理
this.localizationsDelegates,
// 多语言回调
this.localeListResolutionCallback,
this.localeResolutionCallback,
// 支持的多国语言
this.supportedLocales = const <Locale>[Locale('en', 'US')],
// 调试显示材质网格
this.debugShowMaterialGrid = false,
// 显示性能叠加
this.showPerformanceOverlay = false,
// 检查缓存图片的情况
this.checkerboardRasterCacheImages = false,
// 检查不必要的setlayer
this.checkerboardOffscreenLayers = false,
// 显示语义调试器
this.showSemanticsDebugger = false,
// 显示debug标记 右上角
this.debugShowCheckedModeBanner = true,
})

Scaffold

Scaffold 是一个页面布局脚手架,实现了基本的 Material 布局,继承自 StatefulWidget,是有状态组件。我们知道大部分的应用页面都是含有标题栏,主体内容,底部导航菜单或者侧滑抽屉菜单等等构成,那么每次都重复写这些内容会大大降低开发效率,所以 Flutter 提供了 Material 风格的 Scaffold 页面布局脚手架,可以很快地搭建出这些元素部分

  • 构造
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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,
// 自动适应底部padding
this.resizeToAvoidBottomPadding,
// 重新计算body布局空间大小,避免被遮挡
this.resizeToAvoidBottomInset,
// 是否显示到底部,默认为true将显示到顶部状态栏
this.primary = true,
this.drawerDragStartBehavior = DragStartBehavior.down,
})

Scaffold.of

Scaffold.of 函数来获取 ScaffoldState 对象

contenxt 是动态获取的

所以需要用 Builder 套一个构造器

1
2
3
4
5
6
7
8
static ScaffoldState of(BuildContext context, { bool nullOk = false }) {
assert(nullOk != null);
assert(context != null);
final ScaffoldState result = context.ancestorStateOfType(const TypeMatcher<ScaffoldState>());
if (nullOk || result != null)
return result;
throw FlutterError(
...

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
return MaterialApp(
// APP 标题
title: 'Material App',

// APP 颜色
color: Colors.yellow,

// 样式
theme: ThemeData(primaryColor: Colors.green),

// 主机暗色模式 android 下无效 ios 可以
darkTheme: ThemeData(primaryColor: Colors.yellow),

// 调试显示材质网格
debugShowMaterialGrid: false,

// 显示性能叠加
showPerformanceOverlay: false,

// 检查缓存图片的情况
checkerboardRasterCacheImages: false,

// 检查不必要的setlayer
checkerboardOffscreenLayers: false,

// 显示语义调试器
showSemanticsDebugger: false,

// 显示debug标记 右上角
debugShowCheckedModeBanner: false,

// 主页
home: Scaffold(
// 菜单栏
appBar: AppBar(
title: Text('Material App Bar'),
),

// 悬浮按钮
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add_photo_alternate),
),

// 悬浮按钮位置
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

// 固定在下方显示的按钮
persistentFooterButtons: [
Text('persistentFooterButtons1'),
Text('persistentFooterButtons2'),
],

// 左侧 侧滑抽屉菜单
drawer: Drawer(
child: Text('data'),
),

// 右侧 侧滑抽屉菜单
endDrawer: Drawer(
child: Text('data'),
),

// 底部菜单
bottomNavigationBar: Text('bottomNavigationBar'),

// 底部拉出菜单
bottomSheet: Text('bottomSheet'),

// 背景色
backgroundColor: Colors.amberAccent,

// 自动适应底部padding
resizeToAvoidBottomPadding: true,

// 压缩顶部菜单空间
primary: false,

// drawerDragStartBehavior: DragStartBehavior.start,

// 正文
body: Builder(
builder: (BuildContext context) {
return Center(
child: Container(
child: RaisedButton(
onPressed: () {
// Scaffold.of(context).openDrawer();
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text('Hello!'),
));
},
child: Text('data'),
),
),
);
},
),
),

//
);

代码

https://github.com/ducafecat/flutter-learn/blob/master/container_widget

参考


© 猫哥

https://ducafecat.tech