• 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 主要功能和属性

    1. title: 应用的标题，通常在任务管理器中显示
    2. theme: 应用的全局主题，定义了颜色、字体等统一样式
    3. home: 应用启动时的默认页面或根页面
    4. routes: 定义命名路由，用于应用内导航
    5. navigatorKey: 全局唯一的 Navigator，用于导航管理
    6. locale: 用于指定应用语言和区域的 Locale
    7. localizationsDelegates: 本地化的代理，用于支持多语言
    8. 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 [],
    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('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';
    2.  
    3. void main() {
    4.   runApp(const MyApp());
    5. }
    6.  
    7. class MyApp extends StatelessWidget {
    8.   const MyApp({Key? key}) : super(key: key);
    9.  
    10.   @override
    11.   Widget build(BuildContext context) {
    12.     return MaterialApp(
    13.       // APP 标题
    14.       // ios 没有用、 android 进程名称 、 web 标题tab栏名称
    15.       title: 'Material App',
    16.  
    17.       // APP 颜色
    18.       color: Colors.green,
    19.  
    20.       // 样式
    21.       theme: ThemeData(
    22.         primarySwatch: Colors.yellow,
    23.       ),
    24.  
    25.       // 主机暗色模式
    26.       darkTheme: ThemeData(
    27.         primarySwatch: Colors.red,
    28.       ),
    29.  
    30.       // 显示debug标记 右上角
    31.       // debugShowCheckedModeBanner: false,
    32.  
    33.       // 调试显示材质网格
    34.       // debugShowMaterialGrid: true,
    35.  
    36.       // 显示性能叠加
    37.       // showPerformanceOverlay: true,
    38.  
    39.       // 检查缓存图片的情况
    40.       // checkerboardRasterCacheImages: true,
    41.  
    42.       // 检查不必要的setlayer
    43.       // checkerboardOffscreenLayers: true,
    44.  
    45.       // 显示语义调试器
    46.       // showSemanticsDebugger: true,
    47.  
    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 组件的一些常用属性：

    1. appBar：即顶栏，可以包含标题、导航按钮、动作按钮等
    2. body：应用的主体部分，显示页面的主要内容
    3. bottomNavigationBar：底部导航栏，用于页面间的切换
    4. floatingActionButton：浮动操作按钮，通常用于表示主要操作，如添加或编辑
    5. drawer：侧边栏菜单，用于导航到不同的页面或显示其他选项
    6. backgroundColor：背景颜色
    7. 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';
    3.  
    4. // class CupertinoPage extends StatelessWidget {
    5. //   const CupertinoPage({Key? key}) : super(key: key);
    6.  
    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. // }
    19.  
    20. class ScaffoldPage extends StatelessWidget {
    21.   const ScaffoldPage({Key? key}) : super(key: key);
    22.  
    23.   @override
    24.   Widget build(BuildContext context) {
    25.     return Scaffold(
    26.       // 菜单栏
    27.       appBar: AppBar(
    28.         title: const Text('Material App Bar'),
    29.       ),
    30.  
    31.       // 悬浮按钮
    32.       // floatingActionButton: FloatingActionButton(
    33.       //   onPressed: () {},
    34.       //   child: const Icon(Icons.add_photo_alternate),
    35.       // ),
    36.  
    37.       // 悬浮按钮位置
    38.       // floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    39.  
    40.       // 固定在下方显示的按钮
    41.       // persistentFooterButtons: const [
    42.       //   Text('persistentFooterButtons1'),
    43.       //   Text('persistentFooterButtons2'),
    44.       // ],
    45.  
    46.       // 压缩顶部菜单空间
    47.       // primary: true,
    48.  
    49.       // 左侧 侧滑抽屉菜单
    50.       // drawer: const Drawer(
    51.       //   child: Text('data'),
    52.       // ),
    53.  
    54.       // 右侧 侧滑抽屉菜单
    55.       // endDrawer: const Drawer(
    56.       //   child: Text('data'),
    57.       // ),
    58.  
    59.       // 检测手势行为方式，与drawer配合使用 down 方式有卡顿，可以 start 方式
    60.       // drawerDragStartBehavior: DragStartBehavior.start,
    61.  
    62.       // 底部导航栏
    63.       // bottomNavigationBar: const Text('bottomNavigationBar'),
    64.  
    65.       // 底部拉出菜单
    66.       // bottomSheet: const Text('bottomSheet'),
    67.  
    68.       // 背景色
    69.       // backgroundColor: Colors.amberAccent,
    70.  
    71.       // 自动适应底部padding
    72.       // resizeToAvoidBottomInset: true,
    73.  
    74.       // 正文
    75.       body: Builder(
    76.         builder: (BuildContext context) {
    77.           return Center(
    78.             child: ElevatedButton(
    79.               onPressed: () {
    80.                 // 脚手架管理
    81.                 // Scaffold.of(context).openDrawer();
    82.  
    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 children = const [],
    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,
    20.  
    21.   })

    MainAxisAlignment

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

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

    CrossAxisAlignment

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

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

    MainAxisSize

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

    1. enum MainAxisSize {
    2.   // 根据传入的布局约束条件，最大化主轴方向占用可用空间，也就是尽可能充满可用宽度
    3.   max,
    4.  
    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);
    3.  
    4.   @override
    5.   Widget build(BuildContext context) {
    6.     return Scaffold(
    7.       backgroundColor: Colors.blue,
    8.       body: Container(
    9.         // color: Colors.amber,
    10.  
    11.         // Margin(外边距)
    12.         margin: const EdgeInsets.all(50),
    13.  
    14.         // Padding(内边距)
    15.         padding: const EdgeInsets.all(20),
    16.  
    17.         // Content(内容)
    18.         child: const Text("我是内容"),
    19.  
    20.         // 装饰样式
    21.         decoration: BoxDecoration(
    22.           // 背景色
    23.           color: Colors.amber,
    24.  
    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';
    2.  
    3. const img1 =
    4.     "https://ducafecat.tech/2021/12/09/blog/2021-jetbrains-fleet-vs-vscode/2021-12-09-10-30-00.png";
    5.  
    6. class MyPage extends StatelessWidget {
    7.   const MyPage({Key? key}) : super(key: key);
    8.  
    9.   @override
    10.   Widget build(BuildContext context) {
    11.     return Scaffold(
    12.       body: Container(
    13.         // 约束父容器
    14.         constraints: const BoxConstraints.expand(
    15.           height: 300.0,
    16.         ),
    17.  
    18.         // 外边距
    19.         margin: const EdgeInsets.all(20.0),
    20.  
    21.         // 内边距
    22.         padding: const EdgeInsets.all(30.0),
    23.  
    24.         // 背景色
    25.         // color: Colors.teal.shade700,
    26.  
    27.         // 子Widget居中
    28.         alignment: Alignment.centerLeft,
    29.  
    30.         // 子Widget元素
    31.         child: Text(
    32.           'Hello World',
    33.           style: TextStyle(
    34.             fontSize: 34,
    35.             fontWeight: FontWeight.bold,
    36.             color: Colors.white,
    37.           ),
    38.         ),
    39.  
    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.         ),
    72.  
    73.         // 前景装饰
    74.         // foregroundDecoration: BoxDecoration(
    75.         //   image: DecorationImage(
    76.         //     image: AssetImage('assets/flutter.png'),
    77.         //   ),
    78.         // ),
    79.  
    80.         // Container旋转
    81.         // transform: Matrix4.rotationZ(0.1),
    82.       ),
    83.     );
    84.   }
    85. }
    86.  
    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.
    2.  
    3. /// * [Flex], if you don't know in advance if you want a horizontal or vertical
    4.  
    5. /// arrangement.
    6.  
    7. /// * [Expanded], to indicate children that should take all the remaining room.
    8.  
    9. /// * [Flexible], to indicate children that should share the remaining room but
    10.  
    11. /// that may size smaller (leaving some remaining room unused).
    12.  
    13. /// * [SingleChildScrollView], whose documentation discusses some ways to
    14.  
    15. /// use a [Column] inside a scrolling container.
    16.  
    17. /// * [Spacer], a widget that takes up space proportional to its flex value.
    18.  
    19. /// * The [catalog of layout widgets](https://flutter.dev/widgets/layout/).
    20.  
    21. class Column extends Flex {
    22.  
    23. ...

    6.2 Expanded

    Expanded 只能放在 Flex、Column、Row 中使用

    把包裹的元素撑开

    代码

    1. class FlexPage extends StatelessWidget {
    2.   const FlexPage({Key? key}) : super(key: key);
    3.  
    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({
    2.  
    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 children = const [],
    19.  
    20. })

    7.2 Positioned

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

    定义

    1. const Positioned({
    2.  
    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';
    2.  
    3. class StackPage extends StatelessWidget {
    4.   const StackPage({Key? key}) : super(key: key);
    5.  
    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 children = const [],
    16. })

    8.2 示例

    代码

    1. import 'package:flutter/material.dart';
    2.  
    3. class WrapPage extends StatelessWidget {
    4.   const WrapPage({Key? key}) : super(key: key);
    5.  
    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';
    2.  
    3. class AlignPage extends StatelessWidget {
    4.   const AlignPage({Key? key}) : super(key: key);
    5.  
    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);
    3.  
    4.   /// The center point along the top edge.
    5.   static const Alignment topCenter = Alignment(0.0, -1.0);
    6.  
    7.   /// The top right corner.
    8.   static const Alignment topRight = Alignment(1.0, -1.0);
    9.  
    10.   /// The center point along the left edge.
    11.   static const Alignment centerLeft = Alignment(-1.0, 0.0);
    12.  
    13.   /// The center point, both horizontally and vertically.
    14.   static const Alignment center = Alignment(0.0, 0.0);
    15.  
    16.   /// The center point along the right edge.
    17.   static const Alignment centerRight = Alignment(1.0, 0.0);
    18.  
    19.   /// The bottom left corner.
    20.   static const Alignment bottomLeft = Alignment(-1.0, 1.0);
    21.  
    22.   /// The center point along the bottom edge.
    23.   static const Alignment bottomCenter = Alignment(0.0, 1.0);
    24.  
    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.   }

    输出

    创作不易，希望读者三连支持 💖
    赠人玫瑰，手有余香 💖

  • 相关阅读:
    WEB3-众筹合约
    unity urp 实现衣服绒毛效果
    Lecture 3 Process Concept（进程概念）
    Python Selenium 基本使用（详细步骤）
    java毕业生设计大学生社团管理系统计算机源码+系统+mysql+调试部署+lw
    实习记录（一）：MySQL时间偏差问题的发现与解决
    hi3559AV100调试记录
    数据科学家是不是特有前途的职业？
    Partially ordered set
    Java排序算法(三)：插入排序
  • 原文地址：https://blog.csdn.net/weixin_62700590/article/details/139447461