[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布局完全解读
Puppy_Android的博客
07-20 1321
前言 Flex布局是Flutter的五虎上将之一,虎父无犬子，其子Row和Column也能力非凡 你有没有被mainAxisAlignment，crossAxisAlignment弄得晕头转向,本文将助你将他们纳入麾下。 先看一下父子三人在Flutter布局体系中的位置:多子组件布局 1.Flex的属性一览 2.轴向:direction:Axis enum Axis { horizonta...
Flutter-Flex的使用说明
01-20
Flutter-Flex的使用说明 flex也属于一种布局方式，在使用上有点类似于Row、Column；不仅可以进行水平方向的布局，还可以进行垂直方向的布局；布局方式的改变通过direction这个属性。 flex的定义 flex的定义： Flex({...
Flutter系列之Flex布局详解
躬行之
12-28 7722
PS：想做一件事很容易，真正去做一件事很困难。 Flutter 是 Google 推出的跨平台 UI 框架，可以快速地在 Android 和 IOS 上构建高质量的应用程序，其主要特点是 Flutter 具有快速开发的能力、富有表现力和灵活的 Ui 以及良好的原生性能，本篇文章主要介绍 Flutter 中的 Flex 布局，如下： Flex基础 Flex常用设置 Row和Column Expanded和Flexible Spacer 总结 Flex基础 Flex 布局方式已经广泛使用在前端、小程序开.
Flutter 10 Flex布局
最新发布
sziitjin的博客
08-23 1146
将 mainAxisAlignment 设置成 spaceBetween，如果 mainAxisSize 设置为 max，则是整个 Row 宽度基础上按照 spaceBetween 的方式进行排列，如果 mainAxisSize 设置为 min，则是三个 Container 宽度之和范围内按照 spaceBetween 的方式进行排列。设置主轴方向，可设置的值为 Axis.horizontal 和 Axis.vertical，交叉轴与主轴方向垂直。Expanded和Flexible。
浅尝flutter中的flex布局
weixin_34023982的博客
04-02 130
假设你已经掌握了flutter的一些基础知识，比如环境搭建，简单的dart语法，及flutter组件化思想。那么你适合阅读本篇教程，本教程演示一些flutter中的flex用法的简单示例. 在不懂height: 170.0,width:100.0如何适配不同分辨率的时候，只能用flex搞事情，所以咱看看flex如何在flutter中搞事情。 先看效果图： 分析一下需求： 整个布局最外层...
Flutter之Flex组件布局
z001126的博客
04-08 764
【代码】Flutter之Flex组件布局。
flutter 布局之flex
qq_35388369的博客
08-27 501
flutter 布局熟悉flex之后绘制普通UI基本都能解决。 flex是一种弹性布局允许子组件按照一定比例来分配父容器空间。弹性布局的概念在其他UI系统之中也有存在，如微信小程序，和小程序中flex属性基本相似。 Flex组件中的子组件沿着水平或垂直方向排列（row和column） 在flex布局中有主轴和交叉轴的概念，子组件在主轴的方向排成一行：如 row： column： 用来控制子组件在主轴和交叉轴显示的属性MainAxisAlignment 和CrossAxisAlignment
Best-Flutter-UI-Templates：对所有人完全免费。 内置的Flutter Dart
02-17
【标题】"Best-Flutter-UI-Templates" 是一个开源项目，它提供了各种高质量的 Flutter 用户界面（UI）模板，这些模板对所有开发者都是免费的。这个项目的主要目的是帮助开发者快速构建美观、跨平台的应用程序，同时...
flutter中使用基于flutter-sound的flutter-sound-record录音
01-20
本篇将详细讲解如何在Flutter中使用基于`flutter-sound`的`flutter-sound-record`库进行录音操作。 `flutter-sound`是一个强大的库，它为Flutter提供了音频播放、录制以及处理的功能。`flutter-sound-record`则是`...
flutter-embedded-linux:Flutter的嵌入式Linux嵌入式
03-12
Flutter的嵌入式Linux嵌入式 创建该项目是为了开发的非官方嵌入式Linux嵌入。 该嵌入程序着重于嵌入式Linux系统用例。 它还基于Windows的Flutter桌面实现，并且具有一些独特的功能可在嵌入式系统中使用。 目的与...
flutter 弹性布局 flex
qq_45317844的博客
11-19 399
flex可以沿着水平或者垂直方向排列子组件，row和coloumn都继承自flex，参数基本相同，唯一有一个关键参数是Expanded，该参数在row和column中也存在，该参数可以按照比例分配空间，届时主轴空间参数将会失效，其中必传参数direction表示主轴方向，如。
Flutter 页面布局 Flex Expanded弹性布局
flutter开发app的博客
05-24 437
弹性布局（Flex）是一种基于弹性盒子模型的布局方式，类似于Web开发中的Flexbox。在Flutter中，Flex组件是用于实现弹性布局的关键组件之一。Flex布局是一种简洁且强大的方式，可用于构建水平或垂直方向的弹性布局。在这个例子中，我们使用了Flex组件和Expanded组件来构建弹性布局。RaisedButton是一个固定宽度的按钮，而TextField通过Expanded组件占据剩余的可用空间。举例说明： 假设我们有一个水平布局，其中包含两个子组件：一个固定宽度的按钮和一个可伸缩的文本框。
Flutter布局——Flex、FittedBox、Stack、Container
Dream It Possible
08-31 1618
Padding部件和容器内的pading属性的效果实际上是一致的，当同时出现，真实的padding将是两者相加。topLeft（左上），topCenter（顶部中央），topRight（右上），centerLeft，center，centerRight，bottomLeft，bottomCenter，bottomRight。这时的容器的宽度会以据边界的距离（left和right）自动调整。Flutter中涉及到布局的Widget有30多种，一样的效果的ui，实现的途径有很多中。dx和dy的取值都是0~1。.
【Flutter 布局】001-Flex 布局
訾博（ZiBo）的博客
06-11 1126
Flex是 Flutter 中的一个小部件，用于创建一个弹性布局容器。它允许在一个轴上按比例分配可用空间，并根据需要调整子项的大小。Flexdirection和children。direction：指定了弹性容器的主轴方向。可以是水平方向（）或垂直方向（children：包含在弹性容器中的子项列表。Flex使用一种类似于弹性盒子模型的方式来布局子项。子项可以使用Expanded小部件来指定它们在弹性容器中的相对比例。通过在子项中使用Expanded。
Flutter布局
archko的专栏
08-22 450
https://flutter.io/layout/ 当你箱子约束布局遇到一些困难时,可以查看文档: Introduction Unbounded constraints Flex 介绍: 在Flutter,控件由RenderBox对象来渲染的.Render box由父节点给出约束,自己在约束范围内决定大小.约束由高宽最大最小值组成. 通常,有三类箱子,区别在于他们如何处理约束: 尽...
Flutter开发之——多组件布局容器-Flex
我的博客
04-09 262
一 概述 Flex是Row和Column的父控件，也是多组件布局容器 Flex通过direction属性控制控制水平方向显示还是垂直方向显示 二 Flex 2.1 构造方法 Flex({ Key? key, required this.direction, this.mainAxisAlignment = MainAxisAlignment.start, this.mainAxisSize = MainAxisSize.max, this.crossAxisAl
Flutter开发必备：常用布局组件Row与Column解析
"这篇资源主要介绍了Flutter开发中常用的布局组件，包括Row、Column以及Expanded，并提供了相关构造函数的参数说明。" 在Flutter中，布局组件是构建用户界面的基础，它们帮助开发者有效地组织和排列控件。以下是...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值