Flutter 搞定宽高不统一的布局开发

已于 2023-07-16 21:48:25 修改
阅读量701 收藏 1
点赞数
分类专栏： Flutter 入门与实战 文章标签： flutter android ios 移动端开发 前端 用户界面 手机
于 2023-07-16 21:47:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuijian00/article/details/131755629
版权
本文介绍了Flutter的Wrap组件，用于处理尺寸不一的子组件布局。在移动端开发中，如搜索历史显示，由于内容长度不同，传统的布局无法满足需求。Wrap组件能自动换行，支持动态调整子组件布局，包括布局方向、对齐方式和间距等属性。通过示例展示了其在搜索页、标签布局和有限数量的网格布局中的应用。
摘要由CSDN通过智能技术生成

前言

我们在开发移动端界面的时候，经常会遇到一组尺寸不一的组件需要作为同一组展示，典型的就是下面这种搜索历史。搜索内容的文字长短不一，导致显示的宽度不一致。而且，需要根据屏幕的宽度来自动换行显示。这个时候，用行布局或者网格布局都满足不了要求，那怎么办呢？其实 Flutter 为我们提供了很好的组件，那就是Wrap组件。
image.png

Wrap

了解本专栏 订阅专栏 解锁全文 超级会员免费看
岛上码农
关注
专栏目录
订阅专栏
Flutter 实现高仿开眼 APP 的页面开发 01
Mikyou的专栏
09-22 596
通过前面一系列有关 Dart 基础知识、Dart 进阶知识以及 Dart 核心异步编程的学习。终于迎来了 Dart 的实战篇，理论终将要服务实践。之前很多小伙伴一开始上来就非常看重实战开发，对基础知识一带而过。如果你是有认真一步一步看着我的基础文章过来的，那么接下来的实战对非常简单，非常容易上手。因为我会列举出之前我们有详细分析过的知识点，真正感受到学过理论是怎么运用于真正的实际项目中的。如果前...
【非常难受】Flutter Container宽高不生效的背后
08-25 1852
写Flutter你一定也碰到过给Widget设置了宽高但是不生效的情况，然后你去网上搜或是问AI，解决方式一般是让你包一层Expanded/Center/Align或是设置alignment参数，你一试，不报错了，便继续手头的开发工作，但是下一次还会遇到别的布局问题，要么出现了黄黑条框框，要么直接报错连程序都跑不起来。其实会碰到这些问题的本质是你在用写Web的布局思维写Flutter。虽说熟能生巧，但是Flutter的Widget那么多，咱不可能每个都记下来啊，总归要有一个通用的方法论作为开发指导吧？
Flutter笔记（11）flutter中wrap按宽高自动换行布局(1)
2401_84123188的博客
04-17 910
title: new Text(‘wrap按宽高自动换行示例’),),spacing: 8.0, //chip之间的间隙大小runSpacing: 4.0, //行之间的间隙大小Chip(//添加圆形头像‘武大郎’,),),),label: Text(‘武大郎脆饼’),),Chip(//添加圆形头像‘西毒’,),),),label: Text(‘东邪西毒’),),Chip(//添加圆形头像‘杨6郎’,),),),label: Text(‘杨6郎扛枪’),
Flutter笔记（11）flutter中wrap按宽高自动换行布局(2)
最新发布
2401_84123201的博客
04-17 751
当程序员容易，当一个优秀的程序员是需要不断学习的，从初级程序员到高级程序员，从初级架构师到资深架构师，或者走向管理，从技术经理到技术总监，每个阶段都需要掌握不同的能力。最后我想说：对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，title: new Text(‘wrap按宽高自动换行示例’),spacing: 8.0, //chip之间的间隙大小。runSpacing: 4.0, //行之间的间隙大小。label: Text(‘杨6郎扛枪’),
flutter - GridView 网格布局，以及设置子元素的间距和大小
冲锋
10-21 8346
基础的 GridView 布局 参数 说明 gridDelegate 对子元素进行修饰，由于SliverGridDelegate 是一个抽象类， 找它的实现类有 【SliverGridDelegateWithFixedCrossAxisCount，SliverGridDelegateWithMaxCrossAxisExtent,】 childAspectRatio 子元素列表 SliverGridDelegateWithFixedCrossAxisCount方法 说明
Flutter GridView网格布局 几种不同的方式 神仙操作
jq的博客
12-13 1426
一般 方法2 和 方法 3使用的比较多 写法1 GridView.count( //水平子Widget之间间距 crossAxisSpacing: 10.0, //垂直子Widget之间间距 mainAxisSpacing: 10.0, //GridView内边距 padding: EdgeInsets.all(0.0...
flutter text内容高度不定问题解决
whs867712232的博客
08-04 2433
遇到一个listview嵌套listview 里面的item的Text内容高度不确定， 英文，数字普遍比汉字低4.0 所以最后有两种解决办法，一种是给listview加key 一种是强制输入汉字，或者高度固定。 又遇到了获取widget的高度的问题，这里有三种方法，都很准确。 https://www.jianshu.com/p/a3834fe82847 ...
Flutter 笔记 | Flutter 核心原理（三）布局（Layout ）过程
川峰的博客
05-30 2763
Layout（布局）过程主要是确定每一个组件的布局信息（大小和位置），Flutter 的布局过程如下： 父节点向子节点传递约束（constraints）信息，限制子节点的最大和最小宽高。 子节点根据约束信息确定自己的大小（size）。 父节点根据特定布局规则（不同布局组件会有不同的布局算法）确定每一个子节点在父节点布局空间中的位置，用偏移 offset 表示。 递归整个过程，确定出每一个节点的大小和位置。 可以看到，组件的大小是由自身决定的，而组件的位置是由父组件决定的。
Flutter 笔记 | Flutter Native 插件开发 (Android)
川峰的博客
05-20 2204
BasicMessageChannel、 MethodChannel、 EventChannel是开发者和 Flutter Framework 进行通信的接口，它们的底层通信都是通过 messenger 字段所持有的BinaryMessenger接口来实现的。Platform view 允许将原生视图嵌入到 Flutter 应用中，所以您可以通过 Dart 将变换、裁剪和不透明度等效果应用到原生视图。 Flutter 支持两种集成模式：虚拟显示模式 (Virtual displays) 和混合集成模式 (
Flutter业务开发常用小技巧（样式布局篇）
厦门在乎科技
11-17 1769
阴影样式中flutter和css对应关系 UI给出的css样式 width: 75px; height: 75px; background-color: rgba(255, 255, 255, 1); border-radius: 4px; box-shadow: 0px 0.5px 5px 0px rgba(0, 0, 0, 0.08); flutter样式布局 Container( constraints: BoxConstraints.tightFor(width: 75, h
Flutter笔记（11）flutter中wrap按宽高自动换行布局
向着太阳迎着光
07-29 6183
Wrap概述 Warp使用了Flex中的一些概念，某种意义上说跟Row、Column更加相似，单行的Wrap和Row表现几乎是一样的，单列的Wrap和Column表现几乎是一致的，但是Row和Column都是单行单列的，Wrap就突破了这个极限，当主轴上的空间不足的时候，则自动向次轴上去扩展显示。对于一些需要按宽度或者高度让child自动换行的布局的场景，可以使用Wrap。 Wrap属性 ......
Flutter Widgets 之 Wrap
老孟Flutter
02-20 1122
注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 Wrap可以为子控件进行水平或者垂直方向布局，且当空间用完时，Wrap会自动换行，也是常说的流式​布局。 创建多个子控件做为Wrap的子控件，代码如下： Wrap( children: List.generate(10, (i) { ...
Flutter GridView 自定义宽高
杰森丶郭达斯坦森的博客
06-26 3331
/一行多少个crossAxisSpacing: 20, //设置列间距mainAxisSpacing: 10, //设置行间距),
Flutter的staggered GridView详细使用
haoxuhong的博客
03-05 5324
一、简介 flutter staggered gridview是一个支持多列网格大小不同的布局，且Android、iOS、Web都适用 在这种布局中每个单元格都可以称为一个Tile。 它有以下几种特性： 可以像GridView一样设置多列 在纵轴和主轴上可以设置Tile的个数或者所占用的比例（如crossAxisCount：4，StaggeredTile.fit(2)则表示在纵轴上有两列，如果StaggeredTile.fit(1)则表示在纵轴上有4列，如果使用StaggeredTile.Coun
Flutter 组件之Card(卡片)、AspectRatio(宽高比) 、Wrap(流布局)
热门推荐
June.1
03-19 1万+
AspectRatio(宽高比) 设置 宽高比相对于整个外层容器来设置,如果外层是全局屏幕, 宽高比就是按照屏幕的多少比例显示。 如果像下面的例子,宽度是300 宽高比为2/1 那么宽度就是300 。高度就是150 class LearnAspectRatio extends StatelessWidget { @override Widget build(BuildContex...
flutter - 使用 Wrap 实现自定义元素大小的网格布局，代替GridView 部件
冲锋
10-20 861
使用 Wrap 代替 GridView 实现网格布局， 并且可以实现自定义元素的大小 class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { // 获取设备的宽度 var width = MediaQuery.of(context).size.width; return Scaffold( appBar: AppBar( t
Flutter利用GridView创建网格布局实现优美布局
江上清风山间明月的博客
11-07 1572
GridView 是 Flutter 中用于创建网格布局的强大小部件。它允许你在行和列中排列子小部件，非常适合显示大量项目，例如图像、文本、卡片等。GridView 持许多其他配置选项，如滚动方向、内容填充、滚动控制等。你可以根据你的应用需求进行进一步的定制。总的来说，GridView 是一个非常灵活且强大的小部件，可用于创建各种网格布局。结束语Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。
Flutter GridView网格布局
马志武的博客
06-09 3347
目录 参数详解 代码示例 特别说明 效果图 完整代码 在这里介绍两种实现网格布局方法： 1、通过 GridView.count 实现网格布局 2、通过 GridView.builder 实现网格布局 参数详解 属性 说明 scrollDirection 滚动方向 reverse 组件反向排序 controller 滚动控制（滚动监听） pri...
Flutter开发（六）—— GridView网格列表
RedKeyer的博客
04-26 399
原 Flutter开发（六）—— GridView网格列表
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

岛上码农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值