[Flutter必备]-Flex布局完全解读

最新推荐文章于 2024-08-23 14:17:40 发布
最新推荐文章于 2024-08-23 14:17:40 发布
阅读量358 收藏
点赞数
分类专栏： 【Flutter点滴知识 】

0.前言

Flex布局是Flutter的五虎上将之一,虎父无犬子，其子Row和Column也能力非凡
你有没有被mainAxisAlignment，crossAxisAlignment弄得晕头转向,本文将助你将他们纳入麾下。
先看一下父子三人在Flutter布局体系中的位置:多子组件布局

 

 

 

1.Flex的属性一览

属性名类型默认值简介
directionAxis@required轴向
mainAxisAlignmentMainAxisAlignmentstart主轴方向对齐方式
crossAxisAlignmentCrossAxisAlignmentcenter交叉轴方向对齐方式
mainAxisSizeMainAxisSizemax主轴尺寸
textDirectionTextDirectionnull文本方向
verticalDirectionVerticalDirectiondown竖直方向
textBaselineTextBaselinenull基线类型
childrenList[]内部孩子

2.轴向:direction:Axis

enum Axis {
  horizontal,//水平
  vertical,//竖直
}
复制代码

也就是水平排放还是竖直排放，可以看出默认情况下都是主轴顶头,交叉轴居中
比如horizontal下主轴为水平轴，交叉轴则为竖直。也就是水平顶头，竖直居中
这里使用MultiShower快速展示,更好的对比出不同之处，MultiShower详见

 

 

 

var direction =[Axis.horizontal,Axis.vertical];
var show = MultiShower(direction,(e){
  return Flex(
    direction: e,
    children: <Widget>[redBox,blueBox,yellowBox,greenBox],

  );
},color: Colors.black12,width: 300,height: 200);

var redBox= Container(
  color: Colors.red,
  height: 50,
  width: 50,
);

var blueBox= Container(
  color: Colors.blue,
  height: 30,
  width: 60,
);

var yellowBox= Container(
  color: Colors.yellow,
  height: 50,
  width: 100,
);

var greenBox= Container(
  color: Colors.green,
  height: 60,
  width: 60,
);
复制代码

3.主轴方向:mainAxisAlignment:MainAxisAlignment

主轴方向的排布规则,这里以水平为例，主轴为水平方向。竖直类比即可

enum MainAxisAlignment {
  start,//顶头
  end,//接尾
  center,//居中
  spaceBetween,//顶头接尾，其他均分
  spaceAround,//中间的孩子均分,两头的孩子空一半
  spaceEvenly,//均匀平分
复制代码

 

 

 

testMainAxisAlignment(){
  var redBox= Container(
    color: Colors.red,
    height: 50,
    width: 50,
  );

  var blueBox= Container(
    color: Colors.blue,
    height: 30,
    width: 60,
  );

  var yellowBox= Container(
    color: Colors.yellow,
    height: 10,
    width: 10,
  );

  var greenBox= Container(
    color: Colors.green,
    height: 50,
    width: 10,
  );

  var mainAxisAlignment =[
  MainAxisAlignment.start,MainAxisAlignment.center,
  MainAxisAlignment.end,MainAxisAlignment.spaceAround,
  MainAxisAlignment.spaceBetween,MainAxisAlignment.spaceEvenly];

  var show = MultiShower(mainAxisAlignment,(e){
    return Flex(
      direction: Axis.horizontal,
      mainAxisAlignment: e,
      children: <Widget>[redBox,blueBox,yellowBox,greenBox],

    );
  },color: Colors.black12,width: 200,height: 150);
  return show;
}
复制代码

4.交叉轴方向:crossAxisAlignment:CrossAxisAlignment

enum CrossAxisAlignment {
  start,//顶头
  end,//接尾
  center,//居中
  stretch,//伸展
  baseline,//基线
}
复制代码

还是水平为例，交叉轴便是竖轴，这里可以看出他们的布局行为
其中需要注意的是CrossAxisAlignment.baseline使用时必须有textBaseline
其中textBaseline确定对齐的是那种基线,分为alphabetic和ideographic

 

 

 

testCrossAxisAlignment(){
  var redBox= Container(
    color: Colors.red,
    height: 50,
    width: 50,
  );

  var blueBox= Container(
    color: Colors.blue,
    height: 30,
    width: 60,
  );

  var yellowBox= Container(
    color: Colors.yellow,
    height: 10,
    width: 10,
  );

  var greenBox= Container(
    color: Colors.green,
    height: 50,
    width: 10,
  );
  
  var crossAxisAlignment =[CrossAxisAlignment.start,CrossAxisAlignment.center,
    CrossAxisAlignment.end,CrossAxisAlignment.stretch,CrossAxisAlignment.baseline];

  var show = MultiShower(crossAxisAlignment,(e){
    return Flex(
      direction: Axis.horizontal,
      crossAxisAlignment: e,
      textBaseline: TextBaseline.alphabetic,//基线类型
      children: <Widget>[redBox,blueBox,yellowBox,greenBox],

    );
  },color: Colors.black12,width: 200,height: 140);

  return show;
}
复制代码

5.主轴尺寸:mainAxisSize

enum MainAxisSize {
  min,
  max,
}
复制代码

当父容器的宽未约束,Flex默认会将自身尽可能延伸，这便是MainAxisSize.max

 

 

 

此时改为MainAxisSize.min时,它不会延伸自己的区域，自会包裹内容

 

 

 

testMainAxisSize(){
  var redBox= Container(
    color: Colors.red,
    height: 50,
    width: 50,
  );

  var blueBox= Container(
    color: Colors.blue,
    height: 30,
    width: 60,
  );

  var yellowBox= Container(
    color: Colors.yellow,
    height: 10,
    width: 10,
  );

  var greenBox= Container(
    color: Colors.green,
    height: 50,
    width: 10,
  );

  return Center(child: Flex(
    direction: Axis.horizontal,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[redBox,blueBox,yellowBox,greenBox],

  ),);
}
复制代码

6.文字方向:textDirection:TextDirection

enum TextDirection {
  ltr,//从左到右
  rtl,//从右到左
}
复制代码

这个非常好理解，不多言了

 

 

 

testTextDirection(){
  var redBox= Container(
    color: Colors.red,
    height: 50,
    width: 50,
  );

  var blueBox= Container(
    color: Colors.blue,
    height: 30,
    width: 60,
  );

  var yellowBox= Container(
    color: Colors.yellow,
    height: 10,
    width: 10,
  );

  var greenBox= Container(
    color: Colors.green,
    height: 50,
    width: 10,
  );

  var textDirection =[TextDirection.ltr,TextDirection.rtl];
  var show = MultiShower(textDirection,(e){
    return Flex(
      direction: Axis.horizontal,
      textDirection: e,
      children: <Widget>[redBox,blueBox,yellowBox,greenBox],

    );
  },color: Colors.black12,width: 200,height: 140);
  return show;
}
复制代码

7.竖直方向排序:verticalDirection:VerticalDirection

enum VerticalDirection{
    up,
    down,
}
复制代码

 

 

 

testVerticalDirection(){
  var redBox= Container(
    color: Colors.red,
    height: 50,
    width: 50,
  );

  var blueBox= Container(
    color: Colors.blue,
    height: 30,
    width: 60,
  );

  var yellowBox= Container(
    color: Colors.yellow,
    height: 10,
    width: 10,
  );

  var greenBox= Container(
    color: Colors.green,
    height: 50,
    width: 10,
  );

  var verticalDirection =[VerticalDirection.up,VerticalDirection.down];

  var show = MultiShower(verticalDirection,(e){
    return Flex(
      direction: Axis.vertical,
      verticalDirection: e
      children: <Widget>[redBox,blueBox,yellowBox,greenBox],

    );
  },color: Colors.black12,width: 200,height: 140);

  return show;
}
复制代码

8.基线对齐方式:textBaseline:TextBaseline

enum TextBaseline {
  alphabetic,
  ideographic,
}
复制代码

 

 

 

testTextBaseline(){
  var redBox= Text(
    "张风捷特烈",style: TextStyle(fontSize: 20,backgroundColor: Colors.red),
  );

  var blueBox= Text(
    "toly",style: TextStyle(fontSize: 50,backgroundColor: Colors.blue),
  );

  var yellowBox=  Text(
    "1994",style: TextStyle(fontSize: 30,backgroundColor: Colors.green),
  );

  var textBaseline =[TextBaseline.alphabetic,TextBaseline.ideographic];

  var show = MultiShower(textBaseline,(e){
    return Flex(
      direction: Axis.horizontal,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: e,
      children: <Widget>[redBox,blueBox,yellowBox],
    );
  },color: Colors.black12,width: 300,height: 140);

  return show;
}
复制代码

至此，Flutter中的Flex布局就已经完全解读完了。
其中Flutter的孩子Row是direction: Axis.horizontal,Column是direction: Axis.vertical,
其他的属性都是类似的，相当于Flex的简化版，所以Flex在手，天下我有。

结语

本文到此接近尾声了，如果想快速尝鲜Flutter，《Flutter七日》会是你的必备佳品;如果想细细探究它,那就跟随我的脚步，完成一次Flutter之旅。
另外本人有一个Flutter微信交流群，欢迎小伙伴加入，共同探讨Flutter的问题，本人微信号:zdl1994328，期待与你的交流与切磋。


作者：张风捷特烈
链接：https://juejin.im/post/5d32f47a6fb9a07ee7431961
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

barnett_y
关注
专栏目录
Flutter-Flex的使用说明
01-20
Flutter-Flex的使用说明 flex也属于一种布局方式，在使用上有点类似于Row、Column；不仅可以进行水平方向的布局，还可以进行垂直方向的布局；布局方式的改变通过direction这个属性。 flex的定义 flex的定义： Flex({...
Flutter系列之Flex布局详解
躬行之
12-28 7725
PS：想做一件事很容易，真正去做一件事很困难。 Flutter 是 Google 推出的跨平台 UI 框架，可以快速地在 Android 和 IOS 上构建高质量的应用程序，其主要特点是 Flutter 具有快速开发的能力、富有表现力和灵活的 Ui 以及良好的原生性能，本篇文章主要介绍 Flutter 中的 Flex 布局，如下： Flex基础 Flex常用设置 Row和Column Expanded和Flexible Spacer 总结 Flex基础 Flex 布局方式已经广泛使用在前端、小程序开.
【Flutter布局控件】Flex详细讲解
Mod_J的博客
08-27 1267
对于刚接触flutter框架的童鞋们，布局控件写的最多的想必是Column和Row两种基本容器组件。这两种组件都有共同的特性，都是容器并且都继承自Flex组件类。唯一的区别就是布局的方向不同而已，Column意为列，表示垂直布局，Row意为行，表示纵向排列。因为Flex是继承自MultiChildRenderObjectWidget，在介绍Flex之前，就先来掌握一下基本组件MultiChildRenderObjectWidget的使用。 1.Flutter的布局控件MultiChildRender.
Flutter 10 Flex布局
最新发布
sziitjin的博客
08-23 1150
将 mainAxisAlignment 设置成 spaceBetween，如果 mainAxisSize 设置为 max，则是整个 Row 宽度基础上按照 spaceBetween 的方式进行排列，如果 mainAxisSize 设置为 min，则是三个 Container 宽度之和范围内按照 spaceBetween 的方式进行排列。设置主轴方向，可设置的值为 Axis.horizontal 和 Axis.vertical，交叉轴与主轴方向垂直。Expanded和Flexible。
Flutter 中的 Flex 小部件：全面指南
smileKH的博客
05-28 855
Flex是一个线性布局小部件，它将子组件沿着一条线进行排列，可以是水平方向（row）或垂直方向（column）。Flex提供了灵活的子组件对齐、排序和大小调整功能。
Flex布局详解
热门推荐
weixin_44165764的博客
05-13 8万+
传统的布局 基于盒模型 依赖于display属性 + position属性 + float属性 ，但是特殊布局就有些捉襟见肘了，垂直居中 就不容易实现了 一、Flex布局是什么？ flex是Flexible Box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性 //任何一个容器都可以指定为Flex布局 .box{ display:flex; } //行内元素也可以使用Flex布局 .box{ display:inlone-flex; } //Webkit内核的浏览器，必...
Flutter布局——Flex、FittedBox、Stack、Container
Dream It Possible
08-31 1632
Padding部件和容器内的pading属性的效果实际上是一致的，当同时出现，真实的padding将是两者相加。topLeft（左上），topCenter（顶部中央），topRight（右上），centerLeft，center，centerRight，bottomLeft，bottomCenter，bottomRight。这时的容器的宽度会以据边界的距离（left和right）自动调整。Flutter中涉及到布局的Widget有30多种，一样的效果的ui，实现的途径有很多中。dx和dy的取值都是0~1。.
flutter-embedded-linux:Flutter的嵌入式Linux嵌入式
03-12
Flutter的嵌入式Linux嵌入式 创建该项目是为了开发的非官方嵌入式Linux嵌入。 该嵌入程序着重于嵌入式Linux系统用例。 它还基于Windows的Flutter桌面实现，并且具有一些独特的功能可在嵌入式系统中使用。 目的与...
flutter中使用基于flutter-sound的flutter-sound-record录音
01-20
本篇将详细讲解如何在Flutter中使用基于`flutter-sound`的`flutter-sound-record`库进行录音操作。 `flutter-sound`是一个强大的库，它为Flutter提供了音频播放、录制以及处理的功能。`flutter-sound-record`则是`...
flutter plugin-android-lifecycle
09-25
Flutter的flutter_plugin_android_lifecycle插件是一个Flutter插件，用于访问Android Lifecycle objects。它可以帮助其他Flutter插件在Android上更好地集成。 要使用flutter_plugin_android_lifecycle插件，需要将...
Best-Flutter-UI-Templates：对所有人完全免费。 内置的Flutter Dart
02-17
【标题】"Best-Flutter-UI-Templates" 是一个开源项目，它提供了各种高质量的 Flutter 用户界面（UI）模板，这些模板对所有开发者都是免费的。这个项目的主要目的是帮助开发者快速构建美观、跨平台的应用程序，同时...
Flutter之Flex组件布局
z001126的博客
04-08 766
【代码】Flutter之Flex组件布局。
Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
手写我对你的温柔
05-13 4315
用Android原生实现流式布局【实现例如app的很多标签】需要自定义View继承自ViewGroup，然后代码量也不小。 相关自定义View实现流式布局，请参考这位老兄的博客： https://blog.csdn.net/u013107751/article/details/81701606 或者慕课网上的android免费课程有一门课是专门实现自定义流式布局的。 而在Flutter中...
Flutter必备-Flex布局完全解读
Puppy_Android的博客
07-20 1322
前言 Flex布局是Flutter的五虎上将之一,虎父无犬子，其子Row和Column也能力非凡 你有没有被mainAxisAlignment，crossAxisAlignment弄得晕头转向,本文将助你将他们纳入麾下。 先看一下父子三人在Flutter布局体系中的位置:多子组件布局 1.Flex的属性一览 2.轴向:direction:Axis enum Axis { horizonta...
自学成才Flutter 弹性布局、线性布局
flutter开发app的博客
05-29 1144
决定如何对齐 non-positioned 子Widget 和部分 position 子Widget，默认值为Alignment.topStart，部分 positioned 子Widget，在某一个轴上没有定义的，这个轴就使用 alignment 的值，比如left、right为横轴，left 和right 都没有定义，就是横轴没有定义，只要这两个一个有值，这个轴就算有值；VerticalDirection verticalDirection = VerticalDirection.down,//可选；
flutter-row设置均分
IT技术专栏
10-08 1万+
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisSize: MainAxisSize.max, // 交叉轴的布局方式，对于column来说就是水平方向的布局方式 crossAxisAlig...
Flutter | row 平分
无夜之星辰的博客
01-11 4725
用 Expanded 包裹 row 里的每个组件即可： Row( children: [ Expanded(child: view1), Expanded(child: view2), Expanded(child: view3), ], )
Flutter：页面布局摘要
a526001650a的专栏
10-17 1877
页面布局
【自学Flutter】9 Flex布局和 Expanded 的使用，深度好文
m0_60388261的博客
03-28 314
文章会持续更新的。绝对干货！！！Android进阶学习全套手册关于实战，我想每一个做开发的都有话要说，对于小白而言，缺乏实战经验是通病，那么除了在实际工作过程当中，我们如何去更了解实战方面的内容呢？实际上，我们很有必要去看一些实战相关的电子书。
Flutter开发必备：常用布局组件Row与Column解析
"这篇资源主要介绍了Flutter开发中常用的布局组件，包括Row、Column以及Expanded，并提供了相关构造函数的参数说明。" 在Flutter中，布局组件是构建用户界面的基础，它们帮助开发者有效地组织和排列控件。以下是...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值