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

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

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

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

Wrap

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Flutter笔记（11）flutter中wrap按宽高自动换行布局
向着太阳迎着光
07-29 6267
Wrap概述 Warp使用了Flex中的一些概念，某种意义上说跟Row、Column更加相似，单行的Wrap和Row表现几乎是一样的，单列的Wrap和Column表现几乎是一致的，但是Row和Column都是单行单列的，Wrap就突破了这个极限，当主轴上的空间不足的时候，则自动向次轴上去扩展显示。对于一些需要按宽度或者高度让child自动换行的布局的场景，可以使用Wrap。 Wrap属性 ......
Flutter笔记（11）flutter中wrap按宽高自动换行布局(1)
2401_84123188的博客
04-17 939
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 774
当程序员容易，当一个优秀的程序员是需要不断学习的，从初级程序员到高级程序员，从初级架构师到资深架构师，或者走向管理，从技术经理到技术总监，每个阶段都需要掌握不同的能力。最后我想说：对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，title: new Text(‘wrap按宽高自动换行示例’),spacing: 8.0, //chip之间的间隙大小。runSpacing: 4.0, //行之间的间隙大小。label: Text(‘杨6郎扛枪’),
【非常难受】Flutter Container宽高不生效的背后
08-25 2403
写Flutter你一定也碰到过给Widget设置了宽高但是不生效的情况，然后你去网上搜或是问AI，解决方式一般是让你包一层Expanded/Center/Align或是设置alignment参数，你一试，不报错了，便继续手头的开发工作，但是下一次还会遇到别的布局问题，要么出现了黄黑条框框，要么直接报错连程序都跑不起来。其实会碰到这些问题的本质是你在用写Web的布局思维写Flutter。虽说熟能生巧，但是Flutter的Widget那么多，咱不可能每个都记下来啊，总归要有一个通用的方法论作为开发指导吧？
flutter - GridView 网格布局，以及设置子元素的间距和大小
冲锋
10-21 8983
基础的 GridView 布局 参数 说明 gridDelegate 对子元素进行修饰，由于SliverGridDelegate 是一个抽象类， 找它的实现类有 【SliverGridDelegateWithFixedCrossAxisCount，SliverGridDelegateWithMaxCrossAxisExtent,】 childAspectRatio 子元素列表 SliverGridDelegateWithFixedCrossAxisCount方法 说明
Flutter GridView网格布局 几种不同的方式 神仙操作
jq的博客
12-13 1531
一般 方法2 和 方法 3使用的比较多 写法1 GridView.count( //水平子Widget之间间距 crossAxisSpacing: 10.0, //垂直子Widget之间间距 mainAxisSpacing: 10.0, //GridView内边距 padding: EdgeInsets.all(0.0...
flutter text内容高度不定问题解决
whs867712232的博客
08-04 2566
遇到一个listview嵌套listview 里面的item的Text内容高度不确定， 英文，数字普遍比汉字低4.0 所以最后有两种解决办法，一种是给listview加key 一种是强制输入汉字，或者高度固定。 又遇到了获取widget的高度的问题，这里有三种方法，都很准确。 https://www.jianshu.com/p/a3834fe82847 ...
Flutter Widgets 之 Wrap
老孟Flutter
02-20 1191
注意：无特殊说明，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 4095
/一行多少个crossAxisSpacing: 20, //设置列间距mainAxisSpacing: 10, //设置行间距),
Flutter的staggered GridView详细使用
haoxuhong的博客
03-05 5510
一、简介 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 909
使用 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 1728
GridView 是 Flutter 中用于创建网格布局的强大小部件。它允许你在行和列中排列子小部件，非常适合显示大量项目，例如图像、文本、卡片等。GridView 持许多其他配置选项，如滚动方向、内容填充、滚动控制等。你可以根据你的应用需求进行进一步的定制。总的来说，GridView 是一个非常灵活且强大的小部件，可用于创建各种网格布局。结束语Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。
Flutter GridView网格布局
马志武的博客
06-09 3427
目录 参数详解 代码示例 特别说明 效果图 完整代码 在这里介绍两种实现网格布局方法： 1、通过 GridView.count 实现网格布局 2、通过 GridView.builder 实现网格布局 参数详解 属性 说明 scrollDirection 滚动方向 reverse 组件反向排序 controller 滚动控制（滚动监听） pri...
Flutter开发（六）—— GridView网格列表
RedKeyer的博客
04-26 431
原 Flutter开发（六）—— GridView网格列表
Flutter基于GridView实现网格布局
yangxiaoxi09的博客
10-18 201
是flutter中用于展示网格布局风格的widget，我们通常使用。
flutter组件：GridView的使用说明
qianyuan_666的博客
03-07 390
GrildView的使用情况 GridView是宫格式布局，通常用于商城商品列表的展示。 GridView的子组件 1.crossAxisCount 该组件用于设置每一行中的格子个数。 2.crossAxisSpacing 该组件用于设置GridView水平线上每个格子之间的距离 3.mainAxisSpacing 该组件用于设置GridView每一行格子之间的距离 4.childAspectRa...
GridView Item 大小可能不一样，如何保持同一行的Item 高度大小相同，且GridView高度自适应！...
www.v5qq.com的技术博客
08-06 764
昨天用到GridView，但是遇到几个问题，就是GridView默认的item其实大小是一致的，但是我们经常会遇到item大小不同，系统默认会留白的问题，很头疼！如下图这样的： 就会造成，右图所示，左右大小不一致，中间还留了一块，给人的感觉太差了！！ 那如何保证GridView自适应且看起来更美观呢？ 达到这样的效果呢？？ 度娘搜索了，google了，还是没找到好的方法！！但是在一...
Flutter基础学习 9-19 GridView网格列表组件
dpl12的博客
06-15 576
前面我们介绍了ListView，下面介绍GridView的使用，网格列表经常用来显示多张图片，比如我们经常使用的手机里的相册功能，大部分形式都是网格列表。 话不多数，demo源码如下： import 'package:flutter/material.dart'; //主函数（入口函数） void main() { runApp(MyApp()); } //声明MyApp类继承-S...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

岛上码农

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

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

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

打赏作者

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

抵扣说明：

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

余额充值