Flutter:用于垂直显示多个图标的换行和列

Flutter是一种跨平台的移动应用开发框架，它可以帮助开发者快速构建高性能、美观的移动应用程序。Flutter使用Dart语言进行开发，具有丰富的UI组件和强大的渲染引擎，可以实现快速的布局和渲染。

在Flutter中，要实现垂直显示多个图标的换行和列，可以使用Flutter提供的Row和Column组件结合使用。Row组件用于水平排列子组件，而Column组件用于垂直排列子组件。

具体实现步骤如下：

导入Flutter的material包，以便使用其中的图标组件。
导入Flutter的material包，以便使用其中的图标组件。
创建一个包含多个图标的列表。
创建一个包含多个图标的列表。
使用ListView.builder构建一个垂直滚动的列表，并在其中使用Row和Column组件来实现图标的换行和列。
使用ListView.builder构建一个垂直滚动的列表，并在其中使用Row和Column组件来实现图标的换行和列。

这样，就可以实现垂直显示多个图标的换行和列。每行显示3个图标，每个图标下方显示对应的图标名称。

推荐的腾讯云相关产品：腾讯云移动开发平台（https://cloud.tencent.com/product/mpp）可以帮助开发者快速构建和部署Flutter应用，并提供丰富的移动开发工具和服务。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter中构建布局顶

建立布局第0步：设置第1步：绘制布局图第2步：实施标题行第3步：实现按钮行第4步：实现文本部分第5步：实现图像部分第6步：把它放在一起 Flutter的布局方法布置一个小部件垂直和水平放置多个小部件...这会使图像可用于您的代码。第1步：绘制布局图第一步是将布局打破成其基本要素：识别行和列。布局是否包含网格？有重叠的元素吗？用户界面是否需要选项卡？注意需要对齐，填充或边框的区域。...使用其color属性设置图标的颜色。使用文本的style属性来设置字体，颜色，重量等等。列和行的属性允许您指定他们的孩子如何垂直或水平对齐，以及儿童应该占据多少空间。...对于一列，主轴垂直运行，横轴水平运行。 ? ? MainAxisAlignment和CrossAxisAlignment类提供了用于控制对齐的各种常量。...3行文本和可选的前导和尾随图标的行。

43.1K1 0

《Flutter》-- 5.Flutter页面布局

Flutter提供的尺寸限制类容器可以用于限制容器的大小，并提供了多种约束容器组件，常见的有ConstrainedBox、SizedBox和UnconstrainedBox。...Flutter使用Row或Column来实现线性布局，作用类似于Android的线性布局（LinearLayout），且Row和Column都继承自弹性布局。线性布局有主轴和纵轴之分。...：流式布局会自动换行或换列，runAlignment属性指的是每行或每列的对齐方式； 4）runSpacing：每行或每列的间距，默认是0.0； 5）crossAxisAlignment：子组件在交叉轴上的对齐方式...Flutter使用Stack和Positioned两个组件来配合实现绝对定位，Stack组件主要用于子组件的堆叠操作，而Positioned组件则用于确定子组件在Stack组件中的位置。...在层叠布局中，先排列的子组件会出现在视图的底部，后排列的则会显示在上面。Stack组件将子组件分为无定位的子组件和有定位的子组件。

9742 0

我对Flutter的第一次失望

但是，在花了最后两周的时间研究Flutter如何呈现文本后，我对使用的工具感到失望。我们被告知： Flutter的分层体系结构使您可以控制屏幕上的每个像素。这显然不适用于用于绘制文本的像素。...Flutter 指南中如此说：以多个平台为目标的SDK是很常见的……提供可在所有目标平台上运行的API。不幸的是，这通常意味着一个平台或另一个平台独有的功能不可用。...蒙文我的用例是布局并渲染传统的蒙古文字，该文字垂直书写，并从左到右换行。英语是侧身书写，但CJK和表情符号字符应保持其正常方向。...Flutter仅支持支持从右到左和从左到右的布局。不支持（也不支持?）垂直布局。我不会对此表示怀疑。有很多工作。但是我希望他们会给我们更多工具来自己做。...换行在哪里是另一个难题。文字围绕排除路径流动这在iOS中可用，但在Flutter中不可用。而且没有简单的方法可以自己实现。结论我并不是想说服任何人不要使用Flutter。

2.6K3 0

【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )

组件用法参考【Flutter】StatelessWidget 组件 ( CloseButton 组件 | BackButton 组件 | Chip 组件 ) 博客 ; // 可自动换行的水平线性布局...appBar: AppBar(title: Text('布局组件示例'),), // 底部导航栏 BottomNavigationBar 设置 // items 可以设置多个...Row( children: [ // 原始图片, 用于对比...), ], ), // 设置一个布局容器 , 用于封装.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab

9.1K0 0

Flutter学习

那么主轴就是指水平方向，而纵轴即垂直方向；如果布局沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。..., // 一个悬浮在body上的按钮，默认显示在右下角 this.floatingActionButtonLocation, // 用于设置floatingActionButton显示的位置 this.floatingActionButtonAnimator...this.primary = true,// Scaffold是否显示在页面的顶部 }) AppBar属性 leading 返回键 iconTheme Appbar 上图标的颜色、透明度、和尺寸信息...管理多个屏幕有两个核心概念和类：Route 和 Navigator。Route是应用程序的“屏幕”或“页面”的抽象（可以认为是Activity）， Navigator是管理Route的Widget。...添加尾随逗号很简单：始终在函数、方法和构造函数的参数列表末尾添加尾随逗号，以便保留您的编码格式。这将有助于自动格式化程序为Flutter样式代码插入适当的换行符。

2.6K2 0

鸿蒙应用开发-初见：ArkUI

不需要做太多布局计算的工作，让我们少掉一些头发ArkUI和SwiftUI的语法最像，甚至它们的状态管理也很像，都是提供了状态绑定和监听机制来更新UI样式声明式UI布局原理简述Flutter中Widget...可以设置布局方向，是否自动换行等弹性布局方向图Flex({ direction: FlexDirection.Row }) FlexDirection.Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布...rowsTemplate和columnsTemplate属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，fr的个数即网格布局的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比...（Swiper）实现轮播图功能栅格布局（GridRow/GridCol）和Grid布局类似，但是可以根据设置的分割点动态显示列数。...特别适合做多设备适配布局Badge 实现消息小红点和消息数功能WaterFlow 实现瀑布流功能Video 实现视频播放功能TextTimer 实现倒计时显示功能DataPanel 数据面板组件，使用占比图展示多个数据的占比情况

1401 0

【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )

: 设置内边距的组件 ; SizeBox : 用于约束布局大小的组件 ; FractionallySizedBox : 约束布局水平 / 垂直方向的平铺操作 ; MultiChildRenderObjectWidget...: Positioned : 用于固定组件位置的组件 ; Flexible : 用于约束组件在父容器中展开大小的组件 ; 二、Center 组件 ---- widthFactor ( 宽度因子...) 和 heightFactor ( 高度因子 ) 用于控制该组件的宽高 , 类型为 double 浮点型 ; 参数为空 : 如果参数为空 , 则填充整个布局 , 相当于 match_parent ;...组件填充整个屏幕 , Wrap 组件是 Center 的子组件 , 在中心显示 ; 参考博客 : 【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件...| SizedBox 组件 | ClipOval 组件 ) 二、Row 和 Column 组件【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 ) 一、Wrap

8.4K2 0

【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )

2.3K0 0

Flutter 中 ListTile 挂件

开发环境 Flutter Version：3.16.4 系统：macOS Sonoma - Apple M1 芯片 Android Studio： 17.0.7 通过 flutter create jimmy_list_tile...不应该换行，我们可以使用 Text.maxLine 进行单行限制 this.subtitle, // List 中的副标题，通常是 Text 挂件。...leading 和 trailing this.textColor, // 文本的颜色，作用于 title, subtitle, leading 和 trailing。..., // 最小的 leading 宽度 this.titleAlignment, // 定义 leading 和 trailing 的在垂直方向与标题（含副标题）的位置关系 }) 上面每个属性和方法...ListView 是用于显示列表数据的挂件。

1401 0

原创|Android Jetpack Compose 最全上手指南

添加多个Text 在上面的例子中，我们添加了一个Text显示文本，现在我们添加三个文本，代码如下： class MainActivity : AppCompatActivity() { override...是的，跟flutter里面的Column Widget 名字和功能完全一样，甚至连他们的属性都一摸一样。...Text("Android技术杂货铺") Text("依然范特西") } } image.png 可以看到，图片不会按正确的比列显示，接下来，我们来修复它。...要设置图形样式，请将其放入Container(又一个和flutter中一样的控件) Container: 一个通用的内容对象，用于保存和安排其他UI元素。然后，你可以将大小和位置的设置应用于容器。...但是有一个限制，那就是composable函数不能有参数满足下面两个条件：函数没有参数在函数前面添加@Preview注解预览效果图如下：当布局改变了之后，顶部会出现一个导航条，显示预览已经过期

6.2K2 0

Flutter 中 Padding、Row 、Column 、Expanded 组件详解

Row 组件 Row 组件主要用于需要水平布局的情况。常见属性： 1. mainAxisAlignment：主轴的组件对齐方式。...Icons.select_all,color:Colors.blue,size:40.0) ], ) ); } } // 定义传入图标的类...Column组件 Column 组件主要用于需要垂直布局的情况。常见属性： 1. mainAxisAlignment：主轴的组件对齐方式。...Expanded组件 Expanded 类似 Web 开发中的Flex布局，可以用在 Row 和 Column 布局中以定义该子组件所占的百分比。常见属性： 1. flex 子组件占整个父组件比例。...Icons.select_all,color:Colors.green,size:40.0), ), ], ); } } // 定义传入图标的类

1.6K1 0

Flutter中Padding、Row 、Column 、Expanded 组件详解

Row 组件 Row 组件主要用于需要水平布局的情况。...Icons.select_all,color:Colors.blue,size:40.0) ], ) ); } } // 定义传入图标的类...Column组件 Column 组件主要用于需要垂直布局的情况。...Expanded组件 Expanded 类似 Web 开发中的Flex布局，可以用在 Row 和 Column 布局中以定义该子组件所占的百分比。...Icons.select_all,color:Colors.green,size:40.0), ), ], ); } } // 定义传入图标的类

1.2K2 0

CSS总结

2).使用类选择器，自己定义样式后，可以应用给一个或多个元素，一般用于定义重复的样式。类以英文"."开头，后面的名字需要自己定义，类定义后需要在需要使用的元素上使用class="类名"加以调用。...(注：可以同时给一个元素加多个类，类之间用空格隔开。类和id都不要以数据开头)。　　...语法：父元素子元素{属性：值}，如：table td{color:blue;} 　　4.选择符分组(集体控制)：将同样的样式定义用于多个选择符，选择符之间用逗号隔开。　　　　...核心思想是把多张图片合成一张图片里，通过修改背景属性中的定位来控制到底显示图片中的哪些部分。 [5]:CSS常见布局方式：一行一列居中、一行两列居中、两行两列、三行两列、三行三列....[2].内联元素：{display:inline}内联元素只能容忍文本和其他内联元素，它允许其他元素与其同一行，但宽度和高度变得不起作用，常见内联元素有：em、span、a等（不能设置宽和高，不影响换行

2.1K1 0

『Flutter』布局组件 Container、Row、Column、Stack

title: "my App", // 应用程序的主题，用于定义颜色，字体和阴影等。...Row 在Flutter中，Row和Column是用于布局的基本组件，它们分别用于在水平和垂直方向上排列子组件。 Row组件可以在水平方向上排列其子组件。它是一个灵活的布局工具，常用于创建水平布局。...title: "my App", // 应用程序的主题，用于定义颜色，字体和阴影等。...Column Column组件用于在垂直方向上排列其子组件。常用属性： children: Column中的子组件列表。...Stack 在Flutter中，Stack组件用于将多个子组件重叠在一起。Stack允许子组件相对于其边缘或相对于其他子组件的位置进行定位，非常适合用来创建重叠的布局。

5133 0

Caché 变量大全 $Y 变量

Caché 变量大全 $Y 变量包含光标的当前垂直位置。大纲 $Y 描述 $Y包含光标的当前垂直位置。当字符写入设备时，Caché会更新$Y以反映垂直光标位置。...注意 NLS字符映射国家语言支持(NLS)实用程序$X/$Y选项卡定义当前区域设置的$X和$Y光标移动字符。带终端I/O的$Y 下表显示了不同字符对$Y的影响。...更改垂直位置的WRITE $CHAR()也会更改$Y。更改垂直位置的WRITE*不会更改$Y。例如，WRITE$Y，$CHAR(10)，$Y执行换行并递增$Y。...例如，以下命令将光标移动到VT100型端子上的列20和行10，并相应地设置$X和$Y： SET dy=10,dx=20 WRITE *27,*91,dy+1,*59,dx+1,*72 SET...例如，不使用以下代码： WRITE $CHAR(27)_"[1m" 使用此等效表： WRITE *27,*91,*49,*109 通常，在显式移动光标的任何转义序列之后，应更新$X和$Y以反映实际光标位置

9413 1

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

只用于设置Padding，常用于嵌套child，给child设置padding。 Center 只有一个子 Widget。只用于居中显示，常用于嵌套child，给child设置居中。...Stack 可以有多个子 Widget。子Widget堆叠在一起。 Colum 可以有多个子 Widget。垂直布局。 Row 可以有多个子 Widget。水平布局。...在 Colum 和 Row 中充满。 ListView 可以有多个子 Widget。自己意会吧。 Container ：最常用的默认布局！...如下流程和代码：首先是 Container包含了Card，用于快速简单的实现圆角和阴影。然后接下来包含了FlatButton实现了点击，通过Padding实现了边距。...5、Flutter 页面 Flutter 中除了布局的 Widget，还有交互显示的 Widget 和完整页面呈现的Widget。

3.5K3 0

Flutter基础之常用Widget详解一

,Theme) 在Flutter中，Widget的功能是“描述一个UI元素的配置数据” Widget其实并不是表示最终绘制在屏幕上的显示元素,而只是显示元素的配置数据。...Flutter中真正代表屏幕上显示元素的类是Element， Widget只是描述Element的一个配置。...Flutter系统提供了2套UI风格的库，Cupertino widget(iOS 风格)和 Material Design(安卓风格)。...Row、 Column：这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。...Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container可以使用矩阵在三维空间中对其进行变换。

1.9K1 0

Flutter 视图布局（一）

在布局 Widget 中 Row、Column、ListBody、ListView、Wrap、Flow 等都是用于整个页面布局的 Widget，因为这些都支持存在多个子元素，较 html 语言来说，它严格规定了哪些...Widget 是可以存在多个子元素哪些 Widget 是只支持单个子元素。...用代码作为参考来看：它只影响垂直方向的行为，对水平方向并无影响，即是影响 Row 的交叉（副）轴和 Column 的主轴。...03 - 案例实现那我们就来实现一下 Flutter 中文网中给出的例子【在Flutter中构建布局】 https://flutterchina.club/tutorials/layout/ 可以看出它将设计图拆分为基本的元素...那我们就要考虑找出它最大的包裹元素，所以这里是 1 列 4 行。因为是从上到下所以这里用 Column 先确定列，再使用 4 个子元素实现行内容。

2.6K6 1

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

只用于设置Padding，常用于嵌套child，给child设置padding。 Center 只有一个子 Widget。只用于居中显示，常用于嵌套child，给child设置居中。...垂直布局。 Row 可以有多个子 Widget。水平布局。...在 Colum 和 Row 中充满。 ListView 可以有多个子 Widget。...如下流程和代码：首先是 Container包含了Card，用于快速简单的实现圆角和阴影。然后接下来包含了FlatButton实现了点击，通过Padding实现了边距。...5、Flutter 页面 Flutter 中除了布局的 Widget，还有交互显示的 Widget 和完整页面呈现的Widget。

1.9K3 0

【Flutter】堆叠式卡轮播

**我们还将实现一个演示程序，并学习在您的flutter应用程序中使用「stacked_card_carousel」包创建一个带有垂直轮播的堆叠卡。...pub地址：https://pub.dev/packages/stacked_card_carousel 用于创建带有堆叠卡片的垂直轮播的小部件。...下面的演示视频显示了如何在Flutter中创建带有垂直旋转木马的堆叠卡。它显示了在您的flutter应用程序中如何使用「stacked_card_carousel」软件包来使用堆叠式卡轮播。...它显示了垂直圆盘传送带滑动卡的列表，所有卡向上滑动并堆叠，称为堆叠式卡传送带。它会显示在您的设备上。堆叠式卡轮播的一些属性： **items：**这些属性表示卡小部件的列表。...在列小部件中，我们将为图像添加一个容器，添加标题和描述。然后在stacked_card_demo页面上调用该卡。

3.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Flutter:用于垂直显示多个图标的换行和列

相关·内容

Flutter中构建布局顶

《Flutter》-- 5.Flutter页面布局

我对Flutter的第一次失望

【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )

Flutter学习

鸿蒙应用开发-初见：ArkUI

【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )

【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )

Flutter 中 ListTile 挂件

原创|Android Jetpack Compose 最全上手指南

Flutter 中 Padding、Row 、Column 、Expanded 组件详解

Flutter中Padding、Row 、Column 、Expanded 组件详解

CSS总结

『Flutter』布局组件 Container、Row、Column、Stack

Caché 变量大全 $Y 变量

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

Flutter基础之常用Widget详解一

Flutter 视图布局（一）

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

【Flutter】堆叠式卡轮播

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐