ToB企服应用市场:ToB评测及商务社交产业平台

标题: Flutter基础 -- Flutter容器结构 [打印本页]

---

作者: 泉缘泉    时间: 2024-6-9 15:36
标题: Flutter基础 -- Flutter容器结构
目次
1. MaterialApp
1.1 组件定义
1.2 主要功能和属性
1.3 示例
2. 脚手架 Scaffold
2.1 定义
2.2 Scaffold 的属性
2.3 示例
PS: 对于 Scaffold 和 MaterialApp
3. 线性结构 Column Row
3.1 Row
3.2 Column
4. 盒模型 Box Model
4.1 定义
4.2 示例
5. 容器 Container
5.1 定义
5.2 示例
6. 弹性结构 Flex
6.1 Flex
6.2 Expanded
6.3 留白 Spacer 
7. 层叠结构 Stack
7.1 Stack
7.2 Positioned
7.3 示例
8. 流式结构 Wrap
8.1 定义
8.2 示例
9. 对齐定位 Align
9.1 Align
9.2 Alignment
9.3 FractionalOffset
9.4 Center

---

   博主wx：yuanlai45_csdn 博主qq：2777137742
  后期会创建粉丝群，为同学们提供分享交流平台以及提供官方发送的福利奖品~
  1. MaterialApp

1.1 组件定义

Material 风格的步伐的构建，当然相对应的是 ios 风格是 CupertinoApp
MaterialApp class - material library - Dart API
CupertinoApp class - cupertino library - Dart API
MaterialApp 是整个应用的根组件，它提供了应用的基础配置和框架。它承担了设定应用主题、路由以及其他全局配置的责任。
1.2 主要功能和属性

• title: 应用的标题，通常在任务管理器中显示
  
• theme: 应用的全局主题，定义了颜色、字体等同一样式
  
• home: 应用启动时的默认页面或根页面
  
• routes: 定义命名路由，用于应用内导航
  
• navigatorKey: 全局唯一的 Navigator，用于导航管理
  
• locale: 用于指定应用语言和地域的 Locale
  
• localizationsDelegates: 当地化的代理，用于支持多语言
  
• debugShowCheckedModeBanner: 控制是否显示调试模式横幅
  

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

复制代码

1.3 示例

代码

1. import 'package:flutter/material.dart';
3. void main() {
4.   runApp(const MyApp());
5. }
7. class MyApp extends StatelessWidget {
8.   const MyApp({Key? key}) : super(key: key);
10.   @override
11.   Widget build(BuildContext context) {
12.     return MaterialApp(
13.       // APP 标题
14.       // ios 没有用、 android 进程名称 、 web 标题tab栏名称
15.       title: 'Material App',
17.       // APP 颜色
18.       color: Colors.green,
20.       // 样式
21.       theme: ThemeData(
22.         primarySwatch: Colors.yellow,
23.       ),
25.       // 主机暗色模式
26.       darkTheme: ThemeData(
27.         primarySwatch: Colors.red,
28.       ),
30.       // 显示debug标记 右上角
31.       // debugShowCheckedModeBanner: false,
33.       // 调试显示材质网格
34.       // debugShowMaterialGrid: true,
36.       // 显示性能叠加
37.       // showPerformanceOverlay: true,
39.       // 检查缓存图片的情况
40.       // checkerboardRasterCacheImages: true,
42.       // 检查不必要的setlayer
43.       // checkerboardOffscreenLayers: true,
45.       // 显示语义调试器
46.       // showSemanticsDebugger: true,
48.       // 首页
49.       home: Scaffold(
50.         appBar: AppBar(
51.           title: const Text('Material App'),
52.         ),
53.         body: Center(
54.           child: Column(
55.             children: const [
56.               Text("data"),
57.               FlutterLogo(
58.                 size: 100,
59.               ),
60.             ],
61.           ),
62.         ),
63.       ),
64.     );
65.   }
66. }

复制代码

输出

2. 脚手架 Scaffold

2.1 定义

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

以下是 Scaffold 组件的一些常用属性：

• appBar：即顶栏，可以包罗标题、导航按钮、动作按钮等
  
• body：应用的主体部分，显示页面的主要内容
  
• bottomNavigationBar：底部导航栏，用于页面间的切换
  
• floatingActionButton：浮动操作按钮，通常用于表示主要操作，如添加或编辑
  
• drawer：侧边栏菜单，用于导航到差别的页面或显示其他选项
  
• backgroundColor：背景颜色
  
• resizeToAvoidBottomInset：控制应用在有键盘弹出时是否调解结构以避免遮挡输入框
  

1. const Scaffold({
2.     Key key,
3.     // 菜单栏
4.     this.appBar,
5.     // 中间主体内容部分
6.     this.body,
7.     // 悬浮按钮
8.     this.floatingActionButton,
9.     // 悬浮按钮位置
10.     this.floatingActionButtonLocation,
11.     // 悬浮按钮动画
12.     this.floatingActionButtonAnimator,
13.     // 固定在下方显示的按钮
14.     this.persistentFooterButtons,
15.     // 左侧 侧滑抽屉菜单
16.     this.drawer,
17.     // 右侧 侧滑抽屉菜单
18.     this.endDrawer,
19.     // 底部菜单
20.     this.bottomNavigationBar,
21.     // 底部拉出菜单
22.     this.bottomSheet,
23.     // 背景色
24.     this.backgroundColor,
25.     // 自动适应底部padding
26.     this.resizeToAvoidBottomPadding,
27.     // 重新计算body布局空间大小，避免被遮挡
28.     this.resizeToAvoidBottomInset,
29.     // 是否显示到底部，默认为true将显示到顶部状态栏
30.     this.primary = true,
31.     this.drawerDragStartBehavior = DragStartBehavior.down,
32.   })

复制代码

2.3 示例

代码

1. import 'package:flutter/gestures.dart';
2. import 'package:flutter/material.dart';
4. // class CupertinoPage extends StatelessWidget {
5. //   const CupertinoPage({Key? key}) : super(key: key);
7. //   @override
8. //   Widget build(BuildContext context) {
9. //     return const CupertinoPageScaffold(
10. //       navigationBar: CupertinoNavigationBar(
11. //         middle: Text('我是标题'),
12. //       ),
13. //       child: Center(
14. //         child: Text('我是内容'),
15. //       ),
16. //     );
17. //   }
18. // }
20. class ScaffoldPage extends StatelessWidget {
21.   const ScaffoldPage({Key? key}) : super(key: key);
23.   @override
24.   Widget build(BuildContext context) {
25.     return Scaffold(
26.       // 菜单栏
27.       appBar: AppBar(
28.         title: const Text('Material App Bar'),
29.       ),
31.       // 悬浮按钮
32.       // floatingActionButton: FloatingActionButton(
33.       //   onPressed: () {},
34.       //   child: const Icon(Icons.add_photo_alternate),
35.       // ),
37.       // 悬浮按钮位置
38.       // floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
40.       // 固定在下方显示的按钮
41.       // persistentFooterButtons: const [
42.       //   Text('persistentFooterButtons1'),
43.       //   Text('persistentFooterButtons2'),
44.       // ],
46.       // 压缩顶部菜单空间
47.       // primary: true,
49.       // 左侧 侧滑抽屉菜单
50.       // drawer: const Drawer(
51.       //   child: Text('data'),
52.       // ),
54.       // 右侧 侧滑抽屉菜单
55.       // endDrawer: const Drawer(
56.       //   child: Text('data'),
57.       // ),
59.       // 检测手势行为方式，与drawer配合使用 down 方式有卡顿，可以 start 方式
60.       // drawerDragStartBehavior: DragStartBehavior.start,
62.       // 底部导航栏
63.       // bottomNavigationBar: const Text('bottomNavigationBar'),
65.       // 底部拉出菜单
66.       // bottomSheet: const Text('bottomSheet'),
68.       // 背景色
69.       // backgroundColor: Colors.amberAccent,
71.       // 自动适应底部padding
72.       // resizeToAvoidBottomInset: true,
74.       // 正文
75.       body: Builder(
76.         builder: (BuildContext context) {
77.           return Center(
78.             child: ElevatedButton(
79.               onPressed: () {
80.                 // 脚手架管理
81.                 // Scaffold.of(context).openDrawer();
83.                 // 应用消息管理
84.                 ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
85.                   content: Text('Hello!'),
86.                 ));
87.               },
88.               child: const Text('showSnackBar'),
89.             ),
90.           );
91.         },
92.       ),
93.     );
94.   }
95. }

复制代码

输出

PS: 对于 Scaffold 和 MaterialApp

MaterialApp 是整个应用的根组件，它提供了应用的基础配置和框架。它承担了设定应用主题、路由以及其他全局配置的责任
Scaffold 是用来构建单个页面的结构框架。它提供了一个包罗顶栏、底部导航栏、浮动按钮和主体内容的基本结构
3. 线性结构 Column Row

3.1 Row

Row 结构组件雷同于 Android 中的 LinearLayout 线性结构，它用来做水平横向结构使用，内里的 children 子元素按照水平方向举行分列。
Row class - widgets library - Dart API
定义

1. Row({
2.     Key key,
3.          
4.           // * 子元素集合
5.     List<Widget> children = const <Widget>[],
6.   
7.     // 主轴方向上的对齐方式（Row的主轴是横向轴）
8.     MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
9.     // 在主轴方向（Row的主轴是横向轴）占有空间的值，默认是max
10.     MainAxisSize mainAxisSize = MainAxisSize.max,
11.     // 在交叉轴方向(Row是纵向轴)的对齐方式，Row的高度等于子元素中最高的子元素高度
12.     CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
13.    
14.                 // 水平方向子元素的排列方向：从左到右排列还是反向
15.     TextDirection textDirection,
16.     // 表示纵轴（垂直）的对齐排列方向，默认是VerticalDirection.down，表示从上到下。这个参数一般用于Column组件里
17.     VerticalDirection verticalDirection = VerticalDirection.down,
18.     // 字符对齐基线方式
19.     TextBaseline textBaseline,
21.   })

复制代码

MainAxisAlignment
主轴属性：主轴方向上的对齐方式，Row 是横向轴为主轴

1. enum MainAxisAlignment {
2.   // 按照主轴起点对齐，例如：按照靠近最左侧子元素对齐
3.   start,
5.   // 将子元素放置在主轴的末尾，按照末尾对齐
6.   end,
8.   // 子元素放置在主轴中心对齐
9.   center,
11.   // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，首尾子元素都靠近首尾，没有间隙。有点类似于两端对齐
12.   spaceBetween,
14.   // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，但是首尾子元素的空白区域为1/2
15.   spaceAround,
17.   // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，包括首尾子元素
18.   spaceEvenly,
19. }

复制代码

CrossAxisAlignment
交叉属性：在交叉轴方向的对齐方式，Row 是纵向轴。Row 的高度等于子元素中最高的子元素高度

1. enum CrossAxisAlignment {
2.   // 子元素在交叉轴上起点处展示
3.   start,
5.   // 子元素在交叉轴上末尾处展示
6.   end,
8.   // 子元素在交叉轴上居中展示
9.   center,
11.   // 让子元素填满交叉轴方向
12.   stretch,
14.   // 在交叉轴方向，使得子元素按照baseline对齐
15.   baseline,
16. }

复制代码

MainAxisSize
在主轴方向子元素占有空间的方式，Row 的主轴是横向轴。默认是 max

1. enum MainAxisSize {
2.   // 根据传入的布局约束条件，最大化主轴方向占用可用空间，也就是尽可能充满可用宽度
3.   max,
5.   // 与max相反，是最小化占用主轴方向的可用空间
6.   min,
7. }

复制代码

3.2 Column

Column 是纵向分列子元素
参数用法同上
Column class - widgets library - Dart API
代码

1.   @override
2.   Widget build(BuildContext context) {
3.     return Scaffold(
4.       body: Container(
5.         color: Colors.amber,
6.         child: Column(
7.           mainAxisAlignment: MainAxisAlignment.center,
8.           crossAxisAlignment: CrossAxisAlignment.center,
9.           // mainAxisSize: MainAxisSize.min,
10.           children: const [
11.             FlutterLogo(
12.               size: 24,
13.             ),
14.             FlutterLogo(
15.               size: 48,
16.             ),
17.             FlutterLogo(
18.               size: 128,
19.             ),
20.             FlutterLogo(
21.               size: 200,
22.             ),
23.           ],
24.         ),
25.       ),
26.     );
27.   }

复制代码

输出

4. 盒模型 Box Model

Flutter 结构是混入了 RenderBox 特性，我们来了解下什么是盒模型
4.1 定义

盒子模型在 web 中是基础，所以本文参考了 mozilla w3schools
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
​​​​​​CSS Box Model

差别部分的说明：

• Margin(外边距) - 边框不测的间隔。
  
• Border(边框) - 围绕在内边距和内容外的边框。
  
• Padding(内边距) - 边框内部到内容的间隔。
  
• Content(内容) - 盒子的内容，显示文本和图像。
  

4.2 示例

代码

1. class BoxPage extends StatelessWidget {
2.   const BoxPage({Key? key}) : super(key: key);
4.   @override
5.   Widget build(BuildContext context) {
6.     return Scaffold(
7.       backgroundColor: Colors.blue,
8.       body: Container(
9.         // color: Colors.amber,
11.         // Margin(外边距)
12.         margin: const EdgeInsets.all(50),
14.         // Padding(内边距)
15.         padding: const EdgeInsets.all(20),
17.         // Content(内容)
18.         child: const Text("我是内容"),
20.         // 装饰样式
21.         decoration: BoxDecoration(
22.           // 背景色
23.           color: Colors.amber,
25.           // 边框
26.           border: Border.all(
27.             color: Colors.red,
28.             width: 10,
29.           ),
30.         ),
31.       ),
32.     );
33.   }
34. }

复制代码

输出

5. 容器 Container

5.1 定义

Container 是一个组合类容器，它本身不对应具体的 RenderObject，它是 DecoratedBox、ConstrainedBox、Transform、Padding、Align 等组件组合的一个多功能容器，所以我们只需通过一个 Container 组件可以实现同时需要装饰、变换、限制的场景
Container class - widgets library - Dart API
下面是 Container 的定义：

1. Container({
2.     Key key,
3.     // 容器子Widget对齐方式
4.     this.alignment,
5.     // 容器内部padding
6.     this.padding,
7.     // 背景色
8.     Color color,
9.     // 背景装饰
10.     Decoration decoration,
11.     // 前景装饰
12.     this.foregroundDecoration,
13.     // 容器的宽度
14.     double width,
15.     // 容器的高度
16.     double height,
17.     // 容器大小的限制条件
18.     BoxConstraints constraints,
19.     // 容器外部margin
20.     this.margin,
21.     // 变换，如旋转
22.     this.transform,
23.     // 容器内子Widget
24.     this.child,
25.   })

复制代码

BoxDecoration 装饰

1. const BoxDecoration({
2.   // 背景色
3.   this.color,
4.   // 背景图片
5.   this.image,
6.   // 边框样式
7.   this.border,
8.   // 边框圆角
9.   this.borderRadius,
10.   // 阴影
11.   this.boxShadow,
12.   // 渐变
13.   this.gradient,
14.   // 背景混合模式
15.   this.backgroundBlendMode,
16.   // 形状
17.   this.shape = BoxShape.rectangle,
18. })

复制代码

5.2 示例

代码

1. import 'package:flutter/material.dart';
3. const img1 =
4.     "https://ducafecat.tech/2021/12/09/blog/2021-jetbrains-fleet-vs-vscode/2021-12-09-10-30-00.png";
6. class MyPage extends StatelessWidget {
7.   const MyPage({Key? key}) : super(key: key);
9.   @override
10.   Widget build(BuildContext context) {
11.     return Scaffold(
12.       body: Container(
13.         // 约束父容器
14.         constraints: const BoxConstraints.expand(
15.           height: 300.0,
16.         ),
18.         // 外边距
19.         margin: const EdgeInsets.all(20.0),
21.         // 内边距
22.         padding: const EdgeInsets.all(30.0),
24.         // 背景色
25.         // color: Colors.teal.shade700,
27.         // 子Widget居中
28.         alignment: Alignment.centerLeft,
30.         // 子Widget元素
31.         child: Text(
32.           'Hello World',
33.           style: TextStyle(
34.             fontSize: 34,
35.             fontWeight: FontWeight.bold,
36.             color: Colors.white,
37.           ),
38.         ),
40.         // 背景装饰
41.         decoration: const BoxDecoration(
42.           // 背景色
43.           color: Colors.blueAccent,
44.           // 圆角
45.           borderRadius: BorderRadius.all(
46.             Radius.circular(20.0),
47.           ),
48.           // 渐变
49.           // gradient: RadialGradient(
50.           //   colors: [Colors.red, Colors.orange],
51.           //   center: Alignment.topLeft,
52.           //   radius: .98,
53.           // ),
54.           // 阴影
55.           boxShadow: [
56.             BoxShadow(
57.               blurRadius: 2,
58.               offset: Offset(0, 2),
59.               color: Colors.blue,
60.             ),
61.           ],
62.           // 背景图
63.           image: DecorationImage(
64.             image: NetworkImage(img1),
65.             fit: BoxFit.cover,
66.           ),
67.           // 背景混合模式
68.           backgroundBlendMode: BlendMode.color,
69.           // 形状
70.           // shape: BoxShape.circle,
71.         ),
73.         // 前景装饰
74.         // foregroundDecoration: BoxDecoration(
75.         //   image: DecorationImage(
76.         //     image: AssetImage('assets/flutter.png'),
77.         //   ),
78.         // ),
80.         // Container旋转
81.         // transform: Matrix4.rotationZ(0.1),
82.       ),
83.     );
84.   }
85. }
87. void main() {
88.   runApp(MaterialApp(
89.     home: const MyPage(),
90.     theme: ThemeData(
91.       primarySwatch: Colors.blue,
92.     ),
93.   ));
94. }

复制代码

6. 弹性结构 Flex

弹性结构允许子组件按照一定比例来分配父容器空间。
Flex class - widgets library - Dart API
6.1 Flex

我们可以发现 Column Row 组件都是继承与 Flex，功能非常强大，通常我们直接用 Column Row 即可
flutter/lib/src/widgets/basic.dart

1. /// * [Row], for a horizontal equivalent.
3. /// * [Flex], if you don't know in advance if you want a horizontal or vertical
5. /// arrangement.
7. /// * [Expanded], to indicate children that should take all the remaining room.
9. /// * [Flexible], to indicate children that should share the remaining room but
11. /// that may size smaller (leaving some remaining room unused).
13. /// * [SingleChildScrollView], whose documentation discusses some ways to
15. /// use a [Column] inside a scrolling container.
17. /// * [Spacer], a widget that takes up space proportional to its flex value.
19. /// * The [catalog of layout widgets](https://flutter.dev/widgets/layout/).
21. class Column extends Flex {
23. ...

复制代码

6.2 Expanded

Expanded 只能放在 Flex、Column、Row 中使用
把包裹的元素撑开
代码

1. class FlexPage extends StatelessWidget {
2.   const FlexPage({Key? key}) : super(key: key);
4.   @override
5.   Widget build(BuildContext context) {
6.     return Scaffold(
7.       body: Row(
8.         children: [
9.           Expanded(
10.             child: Container(
11.               color: Colors.amber,
12.             ),
13.           ),
14.           const FlutterLogo(
15.             size: 32,
16.           ),
17.         ],
18.       ),
19.     );
20.   }
21. }

复制代码

输出

Flex 属性调解比例
代码

1.   children: [
2.     Expanded(
3.       flex: 1,
4.       child: Container(
5.         color: Colors.amber,
6.       ),
7.     ),
8.     const Expanded(
9.       flex: 2,
10.       child: FlutterLogo(
11.         size: 32,
12.       ),
13.     ),
14.   ],

复制代码

输出

6.3 留白 Spacer 

留白撑开，很恰当用在标题按钮的场景中
代码

1.   children: [
2.     Container(
3.       width: 50,
4.       color: Colors.amber,
5.     ),
6.     const Spacer(),
7.     const FlutterLogo(
8.       size: 32,
9.     ),
10.   ],

复制代码

输出

7. 层叠结构 Stack

7.1 Stack

Stack 允许子组件堆叠
Stack class - widgets library - Dart API
定义

1. Stack({
3.         Key key,
4.        
5.         // 对齐方式，默认是左上角（topStart）
6.         this.alignment = AlignmentDirectional.topStart,
7.        
8.         // 对齐方向
9.         this.textDirection,
10.        
11.         // 定义如何设置无定位子元素尺寸，默认为loose
12.         this.fit = StackFit.loose,
13.   
14.   // 对超出 Stack 显示空间的部分如何剪裁
15.   this.clipBehavior = Clip.hardEdge,
16.        
17.         // 子元素
18.         List<Widget> children = const <Widget>[],
20. })

复制代码

7.2 Positioned

根据 Stack 的四个角来确定子组件的位置
定义

1. const Positioned({
3.         Key key,
4.        
5.         this.left, // 上下左右位置
6.         this.top,
7.         this.right,
8.         this.bottom,
9.        
10.         this.width, // 宽高
11.         this.height,
12.        
13.         @required Widget child,
14.   
15. })

复制代码

7.3 示例

代码

1. import 'package:flutter/material.dart';
3. class StackPage extends StatelessWidget {
4.   const StackPage({Key? key}) : super(key: key);
6.   @override
7.   Widget build(BuildContext context) {
8.     return Scaffold(
9.       body: SizedBox(
10.         width: 300,
11.         height: 300,
12.         child: Stack(
13.           // 居中对齐
14.           alignment: Alignment.center,
15.           // 子元素溢出, none 不裁剪
16.           clipBehavior: Clip.none,
17.           // 子元素层叠放
18.           children: [
19.             // 三个色块
20.             Container(
21.               width: 300,
22.               height: 300,
23.               color: Colors.amber,
24.             ),
25.             Container(
26.               width: 200,
27.               height: 200,
28.               color: Colors.blue,
29.             ),
30.             Container(
31.               width: 100,
32.               height: 100,
33.               color: Colors.green,
34.             ),
35.             // 绝对定位
36.             const Positioned(
37.               left: 0,
38.               bottom: -50,
39.               child: FlutterLogo(size: 100),
40.             ),
41.           ],
42.         ),
43.       ),
44.     );
45.   }
46. }

复制代码

输出

8. 流式结构 Wrap

用 Row 的时候可以发现子元素不会主动换行，这时候就需要 Wrap 了。
Wrap class - widgets library - Dart API
8.1 定义

1. Wrap({
2.   this.direction = Axis.horizontal,
3.   // 主轴方向的对齐方式
4.   this.alignment = WrapAlignment.start,
5.   // 主轴方向子widget的间距
6.   this.spacing = 0.0,
7.   // 纵轴方向的对齐方式
8.   this.runAlignment = WrapAlignment.start,
9.   // 纵轴方向的间距
10.   this.runSpacing = 0.0,
11.   // 交叉轴对齐方式
12.   this.crossAxisAlignment = WrapCrossAlignment.start,
13.   this.textDirection,
14.   this.verticalDirection = VerticalDirection.down,
15.   List<Widget> children = const <Widget>[],
16. })

复制代码

8.2 示例

代码

1. import 'package:flutter/material.dart';
3. class WrapPage extends StatelessWidget {
4.   const WrapPage({Key? key}) : super(key: key);
6.   @override
7.   Widget build(BuildContext context) {
8.     return Scaffold(
9.       body: Wrap(
10.         // 主轴方向子widget的间距
11.         spacing: 10,
12.         // 纵轴方向的间距
13.         runSpacing: 100,
14.         // 主轴方向的对齐方式
15.         alignment: WrapAlignment.start,
16.         children: const [
17.           FlutterLogo(size: 100),
18.           FlutterLogo(size: 100),
19.           FlutterLogo(size: 100),
20.           FlutterLogo(size: 100),
21.           FlutterLogo(size: 100),
22.           FlutterLogo(size: 100),
23.         ],
24.       ),
25.     );
26.   }
27. }

复制代码

输出

9. 对齐定位 Align

调解子元素在父元素的位置
Align class - widgets library - Dart API
9.1 Align

定义

1. Align({
2.   Key key,
3.   
4.   // 需要一个AlignmentGeometry类型的值
5.   // AlignmentGeometry 是一个抽象类，
6.   // 它有两个常用的子类：Alignment和 FractionalOffset
7.   this.alignment = Alignment.center,
8.   
9.   // 两个缩放因子
10.   // 会分别乘以子元素的宽、高，最终的结果就是 Align 组件的宽高
11.   this.widthFactor,
12.   this.heightFactor,
13.   Widget child,
14. })

复制代码

代码

1. import 'package:flutter/material.dart';
3. class AlignPage extends StatelessWidget {
4.   const AlignPage({Key? key}) : super(key: key);
6.   @override
7.   Widget build(BuildContext context) {
8.     return const Scaffold(
9.       body: Align(
10.         widthFactor: 2,
11.         heightFactor: 2,
12.         alignment: Alignment.bottomLeft,
13.         child: FlutterLogo(
14.           size: 50,
15.         ),
16.       ),
17.     );
18.   }
19. }

复制代码

输出
可以发现，Align 的高宽=子元素高宽*高宽因子factor，如果 null 接纳父元素高度约束

9.2 Alignment

Alignment 是从 Align 的中心点出发
定义

1. /// The top left corner.
2.   static const Alignment topLeft = Alignment(-1.0, -1.0);
4.   /// The center point along the top edge.
5.   static const Alignment topCenter = Alignment(0.0, -1.0);
7.   /// The top right corner.
8.   static const Alignment topRight = Alignment(1.0, -1.0);
10.   /// The center point along the left edge.
11.   static const Alignment centerLeft = Alignment(-1.0, 0.0);
13.   /// The center point, both horizontally and vertically.
14.   static const Alignment center = Alignment(0.0, 0.0);
16.   /// The center point along the right edge.
17.   static const Alignment centerRight = Alignment(1.0, 0.0);
19.   /// The bottom left corner.
20.   static const Alignment bottomLeft = Alignment(-1.0, 1.0);
22.   /// The center point along the bottom edge.
23.   static const Alignment bottomCenter = Alignment(0.0, 1.0);
25.   /// The bottom right corner.
26.   static const Alignment bottomRight = Alignment(1.0, 1.0);

复制代码

Alignment(-1.0, -1.0) 标识从中心点出发，左上角
代码

1. ...
2.     return const Scaffold(
3.       body: Align(
4.         alignment: Alignment(-1, -1),
5.         child: FlutterLogo(
6.           size: 50,
7.         ),
8.       ),
9.     );

复制代码

输出
Alignment.topLeft == Alignment(-1, -1) ，用哪种方式都可以

9.3 FractionalOffset

这种方式是固定从左上角出发
代码

1. ...
2.   @override
3.   Widget build(BuildContext context) {
4.     return const Scaffold(
5.       body: Align(
6.         alignment: FractionalOffset(0.5, 0.1),
7.         child: FlutterLogo(
8.           size: 50,
9.         ),
10.       ),
11.     );
12.   }

复制代码

用 FractionalOffset 对象，输入 0~1 的比例值
输出

9.4 Center

Center 是集成了 Align 对象，默认 alignment=Alignment.center
Center 定义, 少了一个 alignment 参数

1. class Center extends Align {
2.   /// Creates a widget that centers its child.
3.   const Center({ Key? key, double? widthFactor, double? heightFactor, Widget? child })
4.     : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
5. }

复制代码

然后 Align 定义, 默认了 this.alignment = Alignment.center,

1. class Align extends SingleChildRenderObjectWidget {
2.   /// Creates an alignment widget.
3.   ///
4.   /// The alignment defaults to [Alignment.center].
5.   const Align({
6.     Key? key,
7.     this.alignment = Alignment.center,
8.     this.widthFactor,
9.     this.heightFactor,
10.     Widget? child,
11.   }) : assert(alignment != null),
12.        assert(widthFactor == null || widthFactor >= 0.0),
13.        assert(heightFactor == null || heightFactor >= 0.0),
14.        super(key: key, child: child);

复制代码

代码

1. ...
2.   @override
3.   Widget build(BuildContext context) {
4.     return const Scaffold(
5.       body: Center(
6.         child: FlutterLogo(
7.           size: 50,
8.         ),
9.       ),
10.     );
11.   }

复制代码

输出

   创作不易，希望读者三连支持 

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4