Flutter学习-多子布局Widget

最新推荐文章于 2024-05-30 09:56:12 发布
最新推荐文章于 2024-05-30 09:56:12 发布
阅读量526 收藏
点赞数
分类专栏： Flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yong_19930826/article/details/118857019
版权

Flutter学习-多子布局Widget

前言：在开发中，我们经常需要将多个Widget放在一起进行布局，比如水平方向、垂直方向排列，甚至有时候需要他们进行层叠，比如图片上面放一段文字等；
这个时候我们需要使用多子布局组件（Multi-child layout widgets）。
比较常用的多子布局组件是Row、Column、Stack

1. Flex

事实上我们即将学习的Row和Column组件都是继承自Flex组件

  • Flex组件和Row、Column属性主要的区别就是多一个direction。
  • 当direction的值为Axis.horizontal的时候，则是Row。
  • 当direction的值为Axis.vertical的时候，则是Column。

那么在学习Row和Column之前，我们需要先学习主轴和交叉轴的概念

因为Row是一行排布的，Column是一列排布，那么它们都存在两个方向，并且两个Widget排列的方向应该是对立的。

它们之中都有主轴（MainAxis）和交叉轴（CrossAxis）的概念：

  • 对于Row来说，主轴（MainAxis）和交叉轴（CrossAxis）分别是下图

在这里插入图片描述

  • 对于Column来说，主轴（MainAxis）和交叉轴（CrossAxis）分别是下图

在这里插入图片描述

2. Row组件

2.1 Row组件介绍

Row组件用于将所有的子Widget排成一行，实际上这种布局应该是借鉴于Web的Flex布局。
如果熟悉Flex布局，会发现非常简单

Row的特点：
水平方向尽可能占据比较大的空间
水平方向也是希望包裹内容, 那么设置mainAxisSize = min
垂直方向包裹内容

从源码中来查看Row的属性：

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, // 主轴对齐方式
  MainAxisSize mainAxisSize = MainAxisSize.max, // 水平方向尽可能大
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 交叉处对齐方式
  TextDirection textDirection, // 水平方向子widget的布局顺序（默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左））
  VerticalDirection verticalDirection = VerticalDirection.down, // 表示Row纵轴（垂直）的对齐方向
  TextBaseline textBaseline, // 如果上面是baseline对齐方式，那么选择什么模式（有两种可选）
  List<Widget> children = const <Widget>[],
})

2.2 属性解析

部分属性解析：（不过文字很难描述，建议大家实现下代码看下实际效果）

2.2.1 mainAxisSize

  • 表示Row在主轴(水平)方向占用的空间，默认是MainAxisSize.max，表示尽可能多的占用水平方向的空间，此时无论子widgets实际占用多少水平空间，Row的宽度始终等于水平方向的最大宽度
  • 而MainAxisSize.min表示尽可能少的占用水平空间，当子widgets没有占满水平剩余空间，则Row的实际宽度等于所有子widgets占用的的水平空间；

2.2.2 mainAxisAlignment

  • mainAxisAlignment：表示子Widgets在Row所占用的水平空间内对齐方式
    • 如果mainAxisSize值为MainAxisSize.min，则此属性无意义，因为子widgets的宽度等于Row的宽度 （水平方向内容包裹），只有当mainAxisSize的值为MainAxisSize.max时，此属性才有意义
  • mainAxisAlignment的取值
    • start：主轴(TextDirection的初始方向)的开始位置挨个摆放元素(默认值)
    • end: 主轴(TextDirection的初始方向)的结束位置挨个摆放元素
    • center: 主轴(TextDirection的初始方向)的中心点对齐
    • spaceBetween: 左右两边的间距为0, 其它元素之间平分间距
    • spaceAround:左右两边的间距是其它元素之间的间距的一半
    • spaceEvenly:所有的间距平分空间
  • textDirection的取值：
    • TextDirection.ltr：MainAxisAlignment.start表示左对齐
    • TextDirection.rtl：TextDirection.rtl时表示从右对齐
    • textDerction : 是对Row起作用的，但是对于Colum是不起作用的

2.2.3 CrossAxisAlignment

crossAxisAlignment：表示子Widgets在纵轴(交叉轴)方向的对齐方式

  • Row的高度等于子Widgets中最高的子元素高度
  • 它的取值和MainAxisAlignment一样(包含start、end、 center三个值)
    • start: 交叉轴的起始位置对齐
    • end: 交叉轴的结束位置对齐
    • center: 中心点对齐(默认值)
    • baseline: 基线对齐(必须有文本的时候才起效果)
    • stretch: 先Row占据交叉轴尽可能大的空间, 将所有的子Widget交叉轴的高度, 拉伸到最大

2.3 代码演练

2.3.1 基础演练

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Container(color: Colors.red, width: 60, height: 60),
        Container(color: Colors.blue, width: 80, height: 80),
        Container(color: Colors.green, width: 70, height: 70),
        Container(color: Colors.orange, width: 100, height: 100),
      ],
    );
  }
}

在这里插入图片描述

2.3.2 mainAxisSize代码演练

默认情况下，Row会尽可能占据多的宽度，让子Widget在其中进行排布，这是因为mainAxisSize属性默认值是MainAxisSize.max。

我们来看一下，如果这个值被修改为MainAxisSize.max会什么变化：

在这里插入图片描述

2.3.3 TextBaseline

关于TextBaseline的取值解析
在这里插入图片描述

  • 行高是高于文字高度的
class RowDemo1 extends StatelessWidget {
  const RowDemo1({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        textBaseline: TextBaseline.ideographic,
        children: <Widget>[
          Container(
            width: 80,
            height: 60,
            color: Colors.red,
            child: Text(
              "Hellxo",
              style: TextStyle(fontSize: 20),
            ),
          ),
          Container(
            width: 120,
            height: 100,
            color: Colors.green,
            child: Text(
              "Woxrld",
              style: TextStyle(fontSize: 30),
            ),
          ),
          Container(
            width: 90,
            height: 80,
            color: Colors.blue,
            child: Text(
              "abxc",
              style: TextStyle(fontSize: 12),
            ),
          ),
          Container(
            width: 50,
            height: 120,
            color: Colors.orange,
            child: Text(
              "cxba",
              style: TextStyle(fontSize: 40),
            ),
          ),
        ],
      ),
    );
  }
}

3. Column

Column组件用于将所有的子Widget排成一列，学会了前面的Row后，Column只是和row的方向不同而已。

3.1 Colum的介绍

我们查看Column的源码，发现和Row的舒心是一致的，这里我们就不过多解释属性了

  Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  })

3.2 Colum的代码演练

我们直接将Row的代码中Row改为Column，然后查看运行效果

class ColumnDemo extends StatelessWidget {
  const ColumnDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      textBaseline: TextBaseline.alphabetic,
      verticalDirection: VerticalDirection.down,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          width: 80,
          height: 60,
          color: Colors.red,
          child: Text(
            "Hellxo",
            style: TextStyle(fontSize: 20),
          ),
        ),
        Container(
          width: 120,
          height: 100,
          color: Colors.green,
          child: Text(
            "Woxrld",
            style: TextStyle(fontSize: 30),
          ),
        ),
        Container(
          width: 90,
          height: 80,
          color: Colors.blue,
          child: Text(
            "abxc",
            style: TextStyle(fontSize: 12),
          ),
        ),
        Container(
          width: 50,
          height: 120,
          color: Colors.orange,
          child: Text(
            "cxba",
            style: TextStyle(fontSize: 40),
          ),
        ),
      ],
    );
  }
}

4. Expanded(弹性组件)

如果我们希望上面的红色和绿色的Container Widget不要设置固定的宽度，而是占据剩余的部分，这个时候应该如何处理呢？

这个时候我们可以使用 Expanded 来包裹 Container Widget，并且将它的宽度不设置值；

class ExpandedDemo extends StatelessWidget {
  const ExpandedDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        textBaseline: TextBaseline.ideographic,
        children: <Widget>[
          /**
           * Flexible中的属性:
           * - flex
           * Expanded(更多) -> Flexible(fit: FlexFit.tight)
           */
          Expanded(child: Container(height: 60, color: Colors.red)),
          Expanded(
              flex: 2,
              child: Container(width: 1000, height: 100, color: Colors.green)),
          Container(width: 90, height: 80, color: Colors.blue),
          Container(width: 50, height: 120, color: Colors.orange),
        ],
      ),
    );
  }
}
  • Expand 有拉伸收缩的功能
  • flex属性，弹性系数，Row会根据两个Expanded的弹性系数来决定它们占据剩下空间的比例
  • 如果两个组件都被Expanded组件包裹，那么两个组件的最终宽度只和flex 属性有关，如果两个组件的该值是一样的， 那么拉升和收缩之后两个组件的宽度是一样的， 和该组件的原始宽度无关（宽度比等于flex的比）

5. Stack

在开发中，我们多个组件很有可能需要重叠显示，比如在一张图片上显示文字或者一个按钮等。
在IOS中可以使用Frame来实现，在Web端可以使用绝对定位，在Flutter中我们需要使用层叠布局Stack。

5.1 属性解析

  • Stack：默认是包裹内容大小的

通过源码我们来看下Stack的属性：

Stack({
  Key key,
  this.alignment = AlignmentDirectional.topStart,//从什么位置开始排布所有的子Widget
  this.textDirection,
  this.fit = StackFit.loose,
  this.overflow = Overflow.clip,//超出部分如何处理,默认是裁剪（clip）
  List<Widget> children = const <Widget>[],
})
  • alignment：此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子widget。所谓部分定位，在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
  • textDirection：和Row、Wrap的textDirection功能一样，都用于决定alignment对齐的参考系即：textDirection的值为TextDirection.ltr，则alignment的start代表左，end代表右；textDirection的值为TextDirection.rtl，则alignment的start代表右，end代表左。
  • fit：此参数用于决定没有定位的子widget如何去适应Stack的大小。StackFit.loose表示使用子widget的大小，StackFit.expand表示扩伸到Stack的大小。
  • overflow：此属性决定如何显示超出Stack显示空间的子widget，值为Overflow.clip时，超出部分会被剪裁（隐藏），值为Overflow.visible 时则不会。

5.2 Stack的演练

  • Stack会经常和Positioned一起来使用，Positioned可以决定组件在Stack中的位置，用于实现类似于Web中的绝对定位效果。
  • 子元素在stack中做绝对定位，使用组件Positioned组件

示例代码：

class RowDemo2 extends StatelessWidget {
  const RowDemo2({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    /**
     * Stack默认的大小是包裹内容的
     *  - alignment: 从什么位置开始排布所有的子Widget
     *  - fit: expand(很少) 将子元素拉伸到尽可能大
     *  - overflow: 超出部分如何处理
     * Positioned
     */
    return Stack(
      children: <Widget>[
        Image.asset("assets/images/juren.jpeg"),
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 8),
            color: Color.fromARGB(150, 0, 0, 0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "进击的巨人挺不错的",
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
                IconButton(
                  icon: Icon(
                    Icons.favorite,
                    color: Colors.white,
                  ),
                  onPressed: () => print("点击了收藏"),
                )
              ],
            ),
          ),
        )
      ],
    );
  }
}
GY-93
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Flutter通过flutter_unity_widget嵌入Unity3D
weixin_50040174的博客
04-04 1953
在unity_demo项目Assets右键导入（import package）插件unitypackages（注：我导入的是FlutterUnityIntegration-v4-WithDemo）会得到以下目录，这个时候Flutter打包的方式如下图。导入UnityLibrary工程，在Runner工程目录下方空白右键Add Files to “Runner”，选择UnityLibrary/Unity-iPhone.xcodeproj，点击Add添加，会得到如下工程目录结构。
Flutter学习 -widget
W_LIN的博客
09-30 637
flutter widget
UnityFlutterAR
03-17
flutter_unity_widget ARKIT演示 演示如何使用Unity Foundation演示将flutter_unity_widget插件与Unity3D ARKIT一起使用。 在Android上运行示例 打开unity项目并进行构建：菜单-> Flutter->导出Android 将android/UnityExport/libs/unity-classes.jar复制到android/unity-classes/unity-classes.jar并覆盖现有文件。 您只需在每次使用不同的Unity版本时执行此操作。 flutter run 在iOS上运行示例 打开unity项目并进行构建：菜单-> Flutter->导出iOS 确保至少使用Unity版本2019.3或更高版本。 在Xcode中打开ios / Runner.xcworkspace（工作区！，不是项目）
Flutter集成Unity
热门推荐
Ai1114的博客
04-04 1万+
最近做项目时需要用到Flutter来做跨平台开发，但是项目中又用到了虚拟场景，这样一来就涉及到了Unity，那么总结下来便是用AndroidStudio来创建Flutter项目，将Unity项目嵌入到Flutter项目中，本篇文章就给大家分享一下Flutter集成Unity的详细过程，下一篇再给大家分享 Flutter与Unity之间的通信；
推荐开源项目：Flutter Unity Widget ARKIT DEMO
最新发布
gitblog_00030的博客
05-30 339
推荐开源项目：Flutter Unity Widget ARKIT DEMO 项目地址:https://gitcode.com/juicycleff/flutter-unity-arkit-demo 1、项目介绍 Flutter Unity Widget ARKIT DEMO是一个开放源代码的项目，它演示了如何使用flutter_unity_widget插件与Unity3D ARKIT结合，呈现U...
【flutter笔记--组件篇】flutter_unity_widget
weixin_45966961的博客
04-06 7824
文章目录一、创建一个新的flutter项目二、在unity目录下新建一个unity项目三、导入unitypackage四、unity配置五、导出unityLibrary六、导入unityLibrary七、引入flutter_unity_widget插件八、flutter_unity_widget运用九、效果 一、创建一个新的flutter项目 并在该项目文件下新建一个unity文件夹 二、在unity目录下新建一个unity项目 1.新建项目 三、导入unitypackage 1.去github ht
flutter-unity-view-widget：Flutter的可嵌入的统一游戏引擎视图。 在此处提前演示https：//github.comjuicycleffflutter-unity-arkit-demo
02-04
flutter_unity_widget Flutter unity 3D小部件，用于将统一性嵌入flutter中。 现在，您可以在Unity中为应用程序提供出色的游戏化功能，并使其以全屏和可嵌入模式在Flutter应用程序中呈现。 在Android，iPad OS和iOS上运行良好。 现在unity文件夹中有两个unity应用示例，一个带有默认场景，另一个基于Unity AR基础示例。 注意：我已经更新了Unity 2019.3.5的示例，并且scripts文件夹中有一些新更改。 请在您的unity项目中替换您已经复制的文件和文件夹。 该软件包仅支持Unity版本2019.3及更高版本。
flutter-embedded-linux:Flutter的嵌入式Linux嵌入式
03-12
Flutter的嵌入式Linux嵌入式 创建该项目是为了开发的非官方嵌入式Linux嵌入。 该嵌入程序着重于嵌入式Linux系统用例。 它还基于Windows的Flutter桌面实现，并且具有一些独特的功能可在嵌入式系统中使用。 目的与...
flutter plugin-android-lifecycle
09-25
Flutter的flutter_plugin_android_lifecycle插件是一个Flutter插件，用于访问Android Lifecycle objects。它可以帮助其他Flutter插件在Android上更好地集成。 要使用flutter_plugin_android_lifecycle插件，需要将...
flutter-master_flutter_flutter-master_
09-29
Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。
Best-Flutter-UI-Templates：对所有人完全免费。 内置的Flutter Dart
02-17
5. **Flutter-Widget**：在 Flutter 中，一切皆为 widget，这是构建用户界面的基本构建块。项目可能包含各种自定义和预定义的 widget 示例。 6. **Flutter-UI**：UI 设计是 Flutter 的核心部分，项目提供了各种预设...
Unity的Flutter——UIWidgets简介及入门
公众号：BennuCTech
09-26 7229
介绍 UIWidgets（https://github.com/UnityTech/UIWidgets）是Unity编辑器的一个插件包，可帮助开发人员通过Unity引擎来创建、调试和部署高效的跨平台应用。 UIWidgets主要来自Flutter。但UIWidgets通过使用强大的Unity引擎为开发人员提供了许多新功能，显著地改进他们开发的应用性能和工作流程。 效率 通过使用最新的Unity渲染......
Flutter学习 Widget简介
RikkaTheWorld
11-17 3525
1. Widget 概述 1.1 Widget概念 在 Flutter 中，几乎所有的对象都是一个 Widget ，与原生的“控件”的，Flutter 中的 Widget 是一个更广泛的概念，正所谓一切皆可Widget， 它不仅可以表示 UI 元素，也可以表示一些功能性的组件，例如 Theme、GuestureDector等。 Flutter 的 Widget 其实就是 “组件”、“部件”、“控件”的概念， 因为其实际灵感是来源于 React， 所以其目标就是通过 Widget 嵌套 Widget 的方式
Android 集成Unity工程出现的崩溃问题
月儿圆
02-02 2542
最近在做一个项目是把Unity的工程集成到AndroidProject中,实现的逻辑就是主程序调用Unity程序 , Unity程序之行结束后然后调用主程序的方法并把相应参数返回回来 , 在IOS上没有任何问题 , 但是在安卓上总是会出现主程序返回主页的时候应用就崩溃重启了 , 爬了很多教程都没有解决 , 把代码重新刷了好几遍都没有解决 , 郁闷了两天 !! 后来找到一篇文章提醒了 . 找到了问题...
flutter 常用的插件
weixin_44911775的博客
10-26 1万+
参考
在Flutter中集成Unity踩坑
lloydfinch's trip
07-23 182
劝退词 先反思一下你们为什么要用flutter去集成unity？可不可以不用fluter去集成？如果可以的话，先放弃，用原生去集成吧，本文也不用看了，因为fluter集成实在太坑了，太降低效率了！步步坑机！如果非要用flutter去集成，或者想挑战下自己的忍耐力，那么请看下文。 集成流程 首先我们打开flutter项目，添加flutter-unity-view-weight依赖，我们直接在p...
flutter入门之widget的生命周期
知识共享，你我皆是知识的搬运工
10-17 1373
源码解读flutter组件的生命周期
Flutter 布局控件完结篇
飞翔的熊blabla
10-30 403
本文对 Flutter 的 29 种布局控件进行了总结分类，讲解一些布局上的优化策略，以及面对具体的布局时，如何去选择控件。 1. 系列文章 前前后后也算是拖拖拉拉的写了一些 Flutter 的文章，写的也都比较粗略。最近工作调动，内部换了部门，一顿瞎忙活，也打乱了原本的分享计划。 从我最开始接触 Flutter 到现在，差不多四个多月了。在这段时间里面，Flutter 也发布了 Relea...
Flutter控件--TextFiled
05-26
Flutter中的TextField是一个常用的输入控件，它允许用户在应用程序中输入文本。 TextField通常用于表单中，可以接收用户输入的文本，比如用户名、密码、电子邮件地址等。 以下是一个基本的TextField示例： ```dart TextField( decoration: InputDecoration( hintText: '请输入文本', ), ); ``` 在上面的示例中，我们使用了decoration属性来设置TextField的外观，其中hintText属性用于设置提示文本。 TextField还有许多其他的属性可以设置，比如maxLength（允许输入的最大长度）、keyboardType（键盘类型）、obscureText（是否隐藏输入内容）等等。 下面是一个更完整的TextField示例： ```dart class MyTextField extends StatefulWidget { @override _MyTextFieldState createState() => _MyTextFieldState(); } class _MyTextFieldState extends State<MyTextField> { final TextEditingController _controller = TextEditingController(); @override Widget build(BuildContext context) { return TextField( controller: _controller, maxLength: 10, keyboardType: TextInputType.text, obscureText: true, decoration: InputDecoration( hintText: '请输入文本', labelText: '文本框', prefixIcon: Icon(Icons.text_fields), suffixIcon: IconButton( icon: Icon(Icons.clear), onPressed: () { setState(() { _controller.clear(); }); }, ), border: OutlineInputBorder(), ), onChanged: (value) { print('输入的文本为：$value'); }, ); } } ``` 在上面的示例中，我们使用了TextEditingController来控制TextField的文本内容，maxLength属性限制了用户输入的最大长度为10，keyboardType属性指定了键盘类型为文本类型，obscureText属性设置为true表示隐藏输入内容。 此外，我们还设置了decoration属性来自定义TextField的外观，包括了输入提示文本、标签文本、前缀图标、后缀图标和边框样式等。 最后，我们通过onChanged回调函数来监听用户输入的文本，并打印出来。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值