Flutter布局基础-多子项部件(一)

最新推荐文章于 2024-03-23 11:31:33 发布
最新推荐文章于 2024-03-23 11:31:33 发布
阅读量435 收藏 1
点赞数
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/du591310450/article/details/89479185
版权

目录

1.Row

2.Column

3.Stack

4.IndexedStack 

5.GridView 

6.Flow        

1.Row

在水平方向上布置子窗口小部件列表

文档

属性：

Row主轴为横轴

children → List<Widget>:包含在Row内的子部件集合

crossAxisAlignment → CrossAxisAlignment:子部件在非主轴上的摆放方式

mainAxisAlignment → MainAxisAlignment：子部件主轴摆放方式

mainAxisSize → MainAxisSize：主轴占用空间大小

textBaseline → TextBaseline：字符对齐方式

textDirection → TextDirection：确定水平放置子部件的顺序。

属性示例

Row(
        crossAxisAlignment: CrossAxisAlignment.center,//非主轴上填充方式
        mainAxisAlignment: MainAxisAlignment.spaceBetween,//主轴填充方式
        mainAxisSize: MainAxisSize.max,//宽度大小
        textBaseline: TextBaseline.ideographic,//字符对齐方式
        textDirection: TextDirection.rtl,//从右到左
        children: <Widget>[
          Container(color:Colors.blue,child: Text("1",style: TextStyle(color: Colors.white))),
          Container(color:Colors.red,child: Text("2",style: TextStyle(color: Colors.white))),
          Container(color:Colors.amber,child: Text("3",style: TextStyle(fontSize:80,color: Colors.white))),
          Container(color:Colors.deepPurple,child: Text("4",style: TextStyle(color: Colors.white))),
          Container(child: Container(color:Colors.green,child: Text("5",style: TextStyle(color: Colors.white)))),
        ],
      );

                                                                            

其它示例

 

要使子项扩展以填充可用的水平空间，请将子项包装在 Expanded widget中。

 

示例一：（子部件未包在Expanded中）图下左

适应子部件大小

Row(
         children: <Widget>[
           Container(color:Colors.blue,child: Text("1",style: TextStyle(color: Colors.white))),
           Container(color:Colors.red,child: Text("2",style: TextStyle(color: Colors.white))),
           Container(color:Colors.amber,child: Text("3",style: TextStyle(color: Colors.white))),
           Container(color:Colors.deepPurple,child: Text("4",style: TextStyle(color: Colors.white))),
           Container(color:Colors.green,child: Text("5",style: TextStyle(color: Colors.white))),
         ],
        );

                                                                             

示例2（子部件包含在Expanded中）图上右

子部件调整自身大小以适应父部件大小  并且根据flex因子大小分配空间

children: <Widget>[
           Expanded(
             flex: 2,
             child: Container(color:Colors.blue,child: Text("1",style: TextStyle(color: Colors.white))),
           ),
           Expanded(
             child: Container(color:Colors.red,child: Text("2",style: TextStyle(color: Colors.white))),
           ),
           Expanded(
             child: Container(color:Colors.amber,child: Text("3",style: TextStyle(color: Colors.white))),
           ),
           Expanded(
             child: Container(color:Colors.deepPurple,child: Text("4",style: TextStyle(color: Colors.white))),
           ),
           Expanded(
             child: Container(color:Colors.green,child: Text("5",style: TextStyle(color: Colors.white))),
           ),
         ],
        );

 

异常提醒

 

Row 部件不会滚动（并且通常将行中的子项多于可用空间中的子项视为错误）

 

若宽度超过父部件宽度则会在超出侧显示黄黑线以提示开发者

官方示例

示例1（超过父部件宽度）显示提醒 左下图

Row(
  children: <Widget>[
    const FlutterLogo(),
    const Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
    const Icon(Icons.sentiment_very_satisfied),
  ],
)

                                                                           

 

示例2（以Expanded包裹Text 使子部件调整自身宽度以适应父部件宽度）右上图

Row(
        children: <Widget>[
          const FlutterLogo(),
          const Expanded(
            child: Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
          ),
          const Icon(Icons.sentiment_very_satisfied),
        ],
      );

 

2.Column

在垂直方向上布置子窗口小部件列表

文档

属性：

Column主轴为纵轴

children → List<Widget>:包含在Column内的子部件集合

crossAxisAlignment → CrossAxisAlignment:子部件在非主轴上的摆放方式

mainAxisAlignment → MainAxisAlignment：子部件主轴摆放方式

mainAxisSize → MainAxisSize：主轴占用空间大小

textBaseline → TextBaseline：字符对齐方式

verticalDirection → VerticalDirection：确定垂直放置子部件的顺序。

属性示例

Column(
        crossAxisAlignment: CrossAxisAlignment.center,//非主轴上填充方式
        mainAxisAlignment: MainAxisAlignment.spaceBetween,//主轴填充方式
        mainAxisSize: MainAxisSize.max,//宽度大小
        textBaseline: TextBaseline.ideographic,//字符对齐方式
        verticalDirection: VerticalDirection.up,//倒序排列
        children: <Widget>[
          Container(color:Colors.blue,child: Text("1",style: TextStyle(color: Colors.white))),
          Container(color:Colors.red,child: Text("2",style: TextStyle(color: Colors.white))),
          Container(color:Colors.amber,child: Text("3",style: TextStyle(fontSize:80,color: Colors.white))),
          Container(color:Colors.deepPurple,child: Text("4",style: TextStyle(color: Colors.white))),
          Container(child: Container(color:Colors.green,child: Text("5",style: TextStyle(color: Colors.white)))),
        ],
      );

                                                                            

其它示例

 

要使子项扩展以填充可用的垂直空间，请将子项包装在 Expanded widget中。

 

示例一：（子部件未包在Expanded中）图下左

适应子部件大小

Row(
         children: <Widget>[
           Container(color:Colors.blue,child: Text("1",style: TextStyle(color: Colors.white))),
           Container(color:Colors.red,child: Text("2",style: TextStyle(color: Colors.white))),
           Container(color:Colors.amber,child: Text("3",style: TextStyle(color: Colors.white))),
           Container(color:Colors.deepPurple,child: Text("4",style: TextStyle(color: Colors.white))),
           Container(color:Colors.green,child: Text("5",style: TextStyle(color: Colors.white))),
         ],
        );

                                                                             

示例2（子部件包含在Expanded中）图上右

子部件调整自身大小以适应父部件大小  并且根据flex因子大小分配空间

Column(
         children: <Widget>[
           Expanded(
             flex: 2,
             child: Container(color:Colors.blue,child: Text("1",style: TextStyle(color: Colors.white))),
           ),
           Expanded(
             child: Container(color:Colors.red,child: Text("2",style: TextStyle(color: Colors.white))),
           ),
           Expanded(
             child: Container(color:Colors.amber,child: Text("3",style: TextStyle(color: Colors.white))),
           ),
           Expanded(
             child: Container(color:Colors.deepPurple,child: Text("4",style: TextStyle(color: Colors.white))),
           ),
           Expanded(
             child: Container(color:Colors.green,child: Text("5",style: TextStyle(color: Colors.white))),
           ),
         ],
        );

 

异常提醒

 

Column 部件不会滚动（并且通常将行中的子项多于可用空间中的子项视为错误）

 

若宽度超过父部件高度则会在超出侧显示黄黑线以提示开发者

官方示例

示例1（超过父部件高度）显示提醒 左下图

Column(
        children: <Widget>[
          Column(
            children: <Widget>[
              const FlutterLogo(),
              const Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
              const Icon(Icons.sentiment_very_satisfied),
            ],
          )
        ],
      );

                                                                           

 

示例2（以Expanded包裹Text 使子部件调整自身宽度以适应父部件高度）右上图

因Column不可滚动纵向超出高度后可添加ListView使超出部件可以滚动

Column(
        children: <Widget>[
          const FlutterLogo(),
          Expanded(
            child: ListView.builder(
                itemCount: 1,
                itemBuilder: (BuildContext context, int index) {
                  return Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.');
                },
                ),
          ),
          const Icon(Icons.sentiment_very_satisfied),
        ],
      );

3.Stack

一个可以将子部件重叠摆放的部件

文档

属性

alignment → AlignmentGeometry：子部件对齐方式

fit → StackFit：若Stack中子部件未定位 子部件约束方式

overflow → Overflow:子部件溢出部分是否裁剪

textDirection → TextDirection：子部件排列方向

children → List<Widget>：子部件集合

示例

Stack(
        alignment: Alignment.topRight,
        fit: StackFit.passthrough,
        textDirection: TextDirection.ltr,
        overflow: Overflow.visible,//溢出部分可见
        children: <Widget>[
          Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
          Container(
            width: 200,
            height: 200,
            color: Colors.green,
          ),
          Positioned(
            right: 100,
            top: 100,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
          ),
        ],
      );
      overflow: Overflow.visible            overflow: Overflow.clip                   fit: StackFit.expand
          （溢出部分可见）                        （溢出部分裁剪）                        （子部件填充方式expand）

                                                                        

 

4.IndexedStack 

一个只显示子部件列表中一个部件的部件

其大小是子部件列表中最大的大小

文档

属性

index → int：要显示的部件下标

alignment → AlignmentGeometry：子部件对齐方式

fit → StackFit：若子部件未定位 子部件约束方式

textDirection → TextDirection：子部件排列方向

children → List<Widget>：子部件列表

示例

IndexedStack(
        alignment: Alignment.center,
        textDirection: TextDirection.ltr,
        index: 0,
        children: <Widget>[
          Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
          Text(
            '123'
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ],
      );

显示第一个子部件

                                                                         

 

5.GridView 

一个可以滚动的网格部件

文档

示例一

 @override
  Widget build(BuildContext context) {
    List<String> list = List<String>();
    for(var i = 0;i<100;i++){
      list.add(i.toString());
    }
    return
      GridView.count(
        primary: true,
        padding: const EdgeInsets.all(10.0),//内边距
        crossAxisSpacing: 10.0,//非主轴间距
        mainAxisSpacing: 10.0,//主轴间距
        crossAxisCount: 4,//非主轴数量
        scrollDirection: Axis.vertical,//主轴方向
        children: list.map((item) => getItem(item)).toList(),
      );
  }

  
  
  Widget getItem(String item){
    return Card(
      color: Colors.red,
      elevation: 10.0,
      clipBehavior: Clip.antiAlias,
      child: Text(item,style: TextStyle(color: Colors.white,fontSize: 40,fontStyle:FontStyle.italic,fontWeight:FontWeight.bold),),
    );

                                                                                                                               

示例二

@override
  Widget build(BuildContext context) {
    List<String> list = List<String>();
    for(var i = 0;i<100;i++){
      list.add(i.toString());
    }
    return
      GridView.builder(
        primary: true,
        itemCount: list.length,
        padding: const EdgeInsets.all(10.0),//内边距
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
        itemBuilder: (BuildContext context, int index){
          return getItem(list[index]);
       },
        scrollDirection: Axis.horizontal,//主轴方向
      );
  }

  
  
  Widget getItem(String item){
    return Card(
      color: Colors.red,
      elevation: 10.0,
      clipBehavior: Clip.antiAlias,
      child: Text(item,style: TextStyle(color: Colors.white,fontSize: 40,fontStyle:FontStyle.italic,fontWeight:FontWeight.bold),),
    );
  }

                                                                                     

 

6.Flow        

一个根据FlowDelegate规则，重新调整和定位子部件的部件。

文档

属性

delegate → FlowDelegate：子部件矩阵变换规则

children → List<Widget>：子部件列表

示例

class MyFlow extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return FlowState();
  }
}

class FlowState extends State<MyFlow>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Flow(
          delegate: MyDelegate(),
          children: <Widget>[
              Center(child: Text('1111')),
              Center(child: Text('2222')),
          ],
        );
  }
}


class MyDelegate extends FlowDelegate{
  @override
  void paintChildren(FlowPaintingContext context) {
    context.paintChild(0,transform:Matrix4.rotationZ(0));
    context.paintChild(1,transform:Matrix4.rotationZ(0.2));
  }

  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    return true;
  }

}

                                                                   

冒泡的嘟嘟
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter-常用的weiget介绍（三）拥有多个子元素的widget
itcast_cs的博客
10-29 970
上一篇介绍了单个子元素的widget，但是我们布局中，往往在容器中不是放一个组件的，接下来，我们来介绍一下在flutter中拥有多个子元素的widget 拥有多个子元素的widget Row 在水平方向上布局子部件的列表，可以让内容进行水平方向的排列，常用的属性如下： children： 子控件们 crossAxisAlignment： 子widget应该如何沿着侧轴（垂直方向）放置 Cros...
Flutter布局基础-多子项部件(二)
du591310450的博客
04-29 684
目录 1.Table ​ 2.Wrap 3.ListBody 4.CustomMultiChildLayout 5.LayoutBuilder 6.ListView 7.Expanded 1.Table 一个将子部件进行表格布局的部件 文档 属性 border→TableBorder：边框格式 columnWidths→...
Flutter 拥有多个子元素的Widgets
dongxingxxx的博客
11-22 2232
1、Row、Column row在水平方向上排列子widget的列表。 column在垂直方向上排列子widget的列表。 a、Row、Column属性 MainAxisAlignment：主轴方向上的对齐方式，会对child的位置起作用，默认是start center：将children放置在主轴的中心； end：将children放置在...
flutter- Row Column Expanded ListView
yujunlong3919的专栏
08-05 1615
文章目录Row继承介绍Code构造方法主轴侧轴MainAxisAlignmentMainAxisSizeCrossAxisAlignment黄色和黑色警告条纹ColumnFlexibleExpanded 继承与FlexibleFlexFitListView参考 Row 继承 Object-> Diagnosticable ->DiagnosticableTree-> Widge...
Flutter 组件封装：文字折叠 NExpandText
最新发布
Androiddddd的博客
03-23 601
然后做尺寸判断进行处理，目前最优的方法。如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。
flutter-windows-3.16.9-stable.zip
01-27
1. 使用`flutter create`命令创建一个新的Flutter项目，自动生成项目的目录结构和基础代码。 2. 在`lib`目录下编写业务逻辑和UI界面，Flutter采用Widget（组件）为基础的构建方式，提供了丰富的预定义组件，如...
Flutter-Dotted-Border:Flutter软件包，可轻松在小部件周围添加虚线边框
04-29
一个flutter包，可以轻松在小部件周围添加虚线边框。 正在安装 要使用此包，请在您的pubspec.yaml文件中将dotted_border添加为依赖pubspec.yaml 。 用法 将DottedBorder小部件包裹在子小部件周围 DottedBorder ( ...
flutter-windows-3.16.8-stable.zip
01-27
标题中的"flutter-windows-3.16.8-stable.zip"表明这是一款针对Windows操作系统的Flutter稳定版SDK，版本号为3.16.8。稳定版意味着它经过了充分的测试，适用于生产环境，提供可靠且持续的性能。 描述中的"flutter_...
coding-with-flutter-layout-cheat-sheet-v1.0.pdf
03-09
在Flutter中，根据小部件可以拥有子部件的数量，布局小部件主要分为两大类：单子部件小部件和多子部件小部件。 单子部件小部件是只能拥有一个子部件的布局小部件，例如Container和Expanded。Container可以拥有一...
flutter-mapbox-gl:用于创建自定义地图的 Mapbox GL flutter 包
08-03
使用git clone git@github.com:tobrun/flutter-mapbox-gl.git克隆存储库 向示例应用程序添加公共 Mapbox 访问令牌（请参阅下一节） 添加用于下载 SDK 的秘密 Mapbox 访问令牌 连接移动设备或启动模拟器、模拟器或 ...
逻辑思维与写作-第一章，第二章-随笔笔记
weixin_37072672的博客
07-08 2501
春江潮水连海平，海上明月共潮生。-春江花月夜 明月松间照，清泉石上流。-山居秋暝 当时明月在，曾照彩云归。-临江山 云散月明谁点缀？天容海色本澄清。-六月二十日夜渡海 议论文是对命题的证明 1、直接的摆出命题，使用各种逻辑方法加以证明。 2，陈述相关材料或者事实，然后让读者根据这些材料和事实得出作者希望给出的命题。 对命题的研究有两个前提，分别是前提真实，形式有效。 前提真实-由科学知识背景决定 形式有效-语义分析 用逻辑学对语法的正确性进行分析。 以名举定，以辞抒意，以说出故 名-概念-反应事物 辞-命题
Flutter text超出一行省略号及Expanded的坑
pengbo6665631的博客
12-26 8273
搞一个这样简单的布局： 就拿第二行来说吧，需要实现地址超出宽度后省略号显示，然后还需要显示一个箭头。 那大体思路就是这样的了： 写完搞定：但是报错：RenderFlex children have non-zero flex but incoming width constraints are unbounded. 意思就是组件被赋予了无限大小 然后下边一堆报错 然后我发现...
Flutter布局中Expanded使用
weixin_33894640的博客
12-21 3918
在flutter 中对 Expanded 使用 来平分布局占用比例（相当于Android里面的LinearLayout 控件中设置权重），但是在使用中遇到一些坑，然后就开始了踩坑之旅........... Column 一种 Column 包含 Expanded 正常显示 Widget _columnExpanded(){ return new Column( children...
Flutter仿朋友圈多行文字展开收起
冬无雪的博客
05-27 2373
Flutter实现类似朋友圈文字显示控件功能：1.文字较少时，直接显示原文本。2.文字超过指定的最大行数时，默认只显示这几行文本，后面…结尾，并且在文本下方有一个“全文”展开按钮；点击“全文”按钮后文本全部显示完整，按钮变成“收起”；点击“收起”按后又恢复成只显示部分行数内容。 测试页面效果图如下： 实现原理： 使用LayoutBuilder控件，实现控件延迟加载。先用TextPainter判断文本内容是否超过指定的行数（例如3行），如果未超过，直接以普通的Text控件显示；如果超过，则显示一个Colu
flutter基础之基础控件Container与Text
fictionss的博客
12-12 1141
 一:布局Container详解 Container在Flutter中太常见了。官方给出的简介，是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。它是一个组合的widget，内部有绘制widget、定位widget、widget尺寸。 构造函数如下： Container({ Key key, this...
Flutter 不到50行代码就可以自定义可伸缩的Text控件
Lyang666的博客
02-04 793
自学Flutter的第二周，已经可以自定义一些自己想要的控件了（仅限于简单点的），比如网络加载时的状态显示（loading，error，empty等），还有就是封装了loading 和第三方刷新加载库 SmartRefresher，在做网络加载时仅用一个自定义widget就可以做以上所有操作，不需要自己处理刷新和加载更多还有展示loading，error等操作，改天有时间发布一下。 回归正题，因为自己做项目的过程中，需要用到可伸缩的Text，在网上找寻第三方库的时候没有找到适合自己的，有些是因为显示问题，
【Flutter -- 基础组件】Flutter 导航栏
Kevin Learn Android
07-18 1618
Flutter 中，我们可以通过 TabBar 和 BottomNavigationBar 组件来实现导航栏
Flutter中的单孩子和多孩子布局组件
m0_59056822的博客
01-02 829
Flutter中的单孩子组件和多孩子组件
Flutter部件状态管理：实现Vue的v-model
"这篇文章除了探讨Flutter部件的基础和状态管理，还特别关注如何在Flutter中实现类似于Vue的v-model功能。文章首先讲解了Flutter中的widget概念，将其与React和Java中的组件或对象进行比较。然后，文章深入讨论了无...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值