Flutter 组件之 Wrap

最新推荐文章于 2024-04-08 02:28:22 发布
最新推荐文章于 2024-04-08 02:28:22 发布
阅读量123 收藏
点赞数
分类专栏： Flutter 组件 文章标签： flutter android 前端 ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tools_are/article/details/128994962
版权
Wrap是Flutter中用于处理行和列布局的组件，它允许子组件按需换行。主要属性包括direction（轴向），alignment（对齐方式），spacing（子组件间间距）等，提供了灵活的多行布局解决方案。通过对direction、alignment、spacing等属性的设置，可以实现不同方向和间距的子组件排列。
摘要由CSDN通过智能技术生成

Flutter 组件之 Wrap

1.简介

行和列布局的组件

2.属性

  • direction： Axis.horizontal主轴方向，决定了子组件纵向布局还是横向
  • alignment：WrapAlignment.start主轴对齐方式，哪个方向是主轴有direction来确定
  • spacing： 每个子组件之间的间距
  • runAlignment：WrapAlignment.start次轴对齐方式
  • runSpacing： 每行/列的间距，由direction决定，horizontal行间距，vertical列间距
  • crossAxisAlignment： WrapCrossAlignment.start次轴对齐方式
  • textDirection：文本方向
  • verticalDirection ：VerticalDirection.down升序布局还是降序布局
  • clipBehavior：Clip.hardEdge
  • children：子集

3.使用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Tools_are
关注
专栏目录
Flutter中Wrap组件
越陌度阡
12-21 1772
Wrap 可以实现流布局，单行的 Wrap 跟 Row 表现几乎一致，单列的 Wrap 则跟 Row 表 现几乎一致。但 Row 与 Column 都是单行单列的，Wrap 则突破了这个限制，mainAxis 上空 间不足时，则向 crossAxis 上去扩展显示。 常见属性： 1.spacing主轴方向上的间距。值为类型为int； 2.runSpacing 副轴方向上的间距。值为类型为int； 3.alignment主轴的对其方式。值的类型为WrapAlignment； 4.run......
Flutter页面布局之Wrap组件
一花一世界 一叶一菩提
02-17 430
Wrap可以实现流布局，单行的Wrap跟Row表现几乎一致，但Row与Column都是单行单列的，Wrap则突破了这个限制，mainAxis上空间不足时，则向crossAxis上扩展显示。 常用属性： 属性 说明 direction 横向纵向的排序方式 默认横向 spacing 横轴的间距 runSpacing 纵轴的间距 ...
Flutter流式布局Wrap使用详解
怀旧的老张 的博客
09-14 2986
目录 先看Wrap相关属性 direction alignment spacing与runSpacing runAlignment crossAxisAlignment verticalDirection clipBehavior 完整代码奉上 对我最大的鼓励与支持： 先看Wrap相关属性 Wrap({ Key key, //排版方向 有 横向Axis.horizontal 纵向Axis.vertical 两种 this.direc...
Flutter 流式布局之Wrap详解
08-25 8249
Wrap Wrap可以为子控件进行水平或者垂直方向布局，且当空间用完时，Wrap会自动换行，也是常说的流式​布局。 创建多个子控件做为Wrap的子控件，代码如下： <span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#cccccc"><code>Wrap( children: List.generate(10, (i) { double w = 50.0 + 10 * i
Flutter 流式布局、自动换行（Wrap、Flow）
Dream It Possible
09-06 4222
使用Android原生来实现流式布局还是有点麻烦的，甚至需要自定义view或者使用第三方的库。而在Flutter中，官方为我们提供了流式布局的控件，我们可以很方便的实现流式布局。FlowDelegate是一个抽象类，我们一般会重写paintChildren方法，在该方法中，我们可以来控制子控件的摆放。在正常情况下，能用wrap就用wrap，实现其来比较简单，如果是比较个性化的排列规则，可以使用Flow来实现。首先来看Wrap，Wrap是一个可以使子控件自动换行的控件，默认的方向是水平的，使用起来非常简单。
Flutter-Wrap的使用说明
lvsonghai的博客
02-09 3505
Flutter-Wrap的使用说明 Wrap可以进行水平方向或者垂直方向上的布局,在一行或者一列现实不完所有的widgets的时候，能够根据当前宽度或者高度自动换行。 Wrap的定义 Wrap定义的属性不多，查看如下： Wrap({ Key key, this.direction = Axis.horizontal,//设置水平局部还是垂直布局 this.alignment...
Flutter 中 Wrap 的使用详解（含对比图） _ Flutter Widgets
m0_66264569的博客
01-21 1229
这是我参与更文挑战的第9天，活动详情查看： 更文挑战 前言 之前两篇我们聊了滚动列表 ListView 和 GridView ，这篇我们来聊聊 Wrap ，看字面意思就是「包裹」，与列表型 Widget 区别在于他是可以根据子项 Widget 的大小来实现自动排列的，而且自身不支持滚动。 看看效果 使用方式 因为 Wrap 使用是比较简单的，难点在于各个参数的调配上，所以我们先看看基本的构建方法，然后聊聊各个属性的使用效果 // 简单的构建 Wrap( children: List.generate(2
Flutter 页面布局 Wrap组件
01-07
Wrap组件实现流布局 //导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //...
Flutter wrap组件
01-20
在Flutter开发中，`Wrap`组件是一个非常实用的布局工具，尤其在处理多个子项排列时，它允许子项在需要的时候自动换行，避免了因屏幕尺寸限制而导致的溢出问题。`Wrap`组件在处理搜索记录、列表或者标签云等场景中...
Flutter wrap组件与自定义组件
01-20
在Flutter开发中，组件是构建用户界面的基本单元。本文将探讨`Wrap`组件以及如何创建自定义组件。`Wrap`组件是一种布局工具，用于在有限的空间内按行或按列排列子元素，当一行无法容纳所有子元素时，它会自动换行。...
【Flutter 2-10】Flutter手把手教程UI布局和Widget——流式布局Wrap
弗拉德的技术博客
01-17 509
在Flutter中Wrap是流式布局控件，Row和Column在布局上是很好用，但是有一个缺点，如果当子控件数量过多导致Row或Column装载不下的时候，就会出现UI页面上的错误。Wrap可以完美的避免这些问题，当控件过多一行显示不全的时候，Wrap可以换行显示。当然`Wrap`跟`Row`和`Column`有着很多相似的地方。
Flutter开发之——多组件布局容器-Wrap，爱了爱了
最新发布
2401_84149592的博客
04-08 807
),
Flutter开发之——多组件布局容器-Wrap
2401_84121871的博客
04-05 851
简历首选内推方式，速度快，效率高啊！然后可以在拉钩，boss，脉脉，大街上看看。简历上写道熟悉什么技术就一定要去熟悉它，不然被问到不会很尴尬！做过什么项目，即使项目体量不大，但也一定要熟悉实现原理！不是你负责的部分，也可以看看同事是怎么实现的，换你来做你会怎么做？做过什么，会什么是广度问题，取决于项目内容。但做过什么，达到怎样一个境界，这是深度问题，和个人学习能力和解决问题的态度有关了。大公司看深度，小公司看广度。大公司面试你会的，小公司面试他们用到的你会不会，也就是岗位匹配度。面试过程一定要有礼貌！
Flutter中的Wrap
Dream It Possible
07-14 6488
我们在flutter中使用能够包含多个child的widget的时候，经常会遇到超出边界范围的情况，尤其是在Column和Row的情况下，那么我们有没有什么好的解决办法呢？答案就是今天我们要讲解的Wrap。Row和Column中可以包含多个子widget，如果子widget超出了Row或者Column的范围会出现什么情况呢？我们以Row的情况举个例子： 上面的例子中，我们在Row中添加了几个YellowBox，YellowBox是一个width=100,height=50的长方形： 运行上面的代码，
Flutter Wrap 流布、自动换行
马志武的博客
06-10 2600
Wrap 可以实现流布局（自动换行），当子元素在一行排列空间不足时，会自动换行排列显示。 参数详解 属性 说明 direction 排列方向（垂直和水平） alignment 主轴（x）对齐方式 spacing 主轴（x）子元素间距 runAlignment 纵轴（y）对齐方式 runSpacing 纵轴（y）子元素间距 cross...
Flutter笔记（11）flutter中wrap按宽高自动换行布局
向着太阳迎着光
07-29 6161
Wrap概述 Warp使用了Flex中的一些概念，某种意义上说跟Row、Column更加相似，单行的Wrap和Row表现几乎是一样的，单列的Wrap和Column表现几乎是一致的，但是Row和Column都是单行单列的，Wrap就突破了这个极限，当主轴上的空间不足的时候，则自动向次轴上去扩展显示。对于一些需要按宽度或者高度让child自动换行的布局的场景，可以使用Wrap。 Wrap属性 ......
Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
手写我对你的温柔
05-13 4338
用Android原生实现流式布局【实现例如app的很多标签】需要自定义View继承自ViewGroup，然后代码量也不小。 相关自定义View实现流式布局，请参考这位老兄的博客： https://blog.csdn.net/u013107751/article/details/81701606 或者慕课网上的android免费课程有一门课是专门实现自定义流式布局的。 而在Flutter中...
Flutter中对应安卓中的wrap_content、match_parent、layout_weight以及Grativy
热门推荐
BillyLu的博客
01-01 1万+
上代码：demo import 'package:flutter/material.dart'; void main() =&gt; runApp(new MyApp()); class MyApp extends StatefulWidget { @override _MyAppState createState() =&gt; new _MyAppState(); } cla...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值