Flutter 流式布局之Wrap

简介: Flutter 流式布局之Wrap

效果:

image.png


Wrap

A widget that displays its children in multiple horizontal or vertical runs.

一个可以横向或纵向显示的流式布局的widget

使用场景:一行显示不下需要换行的时候


源码

  Wrap({
    Key key,
    this.direction = Axis.horizontal,//方向
    this.alignment = WrapAlignment.start,//对齐方式
    this.spacing = 0.0,//子widget 横向的间隔
    this.runAlignment = WrapAlignment.start,
    this.runSpacing = 0.0,//当横向时子widget纵向的间隔
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,//文本方向
    this.verticalDirection = VerticalDirection.down,
    List<Widget> children = const <Widget>[],//子widget 
  }) : super(key: key, children: children);

示例

     Wrap(
       spacing: 8.0, // gap between adjacent chips
       runSpacing: 4.0, // gap between lines
       children: <Widget>[
         Chip( label: Text('Hamilton') ),
         Chip( label: Text('Lafayette') ),
         Chip( label: Text('Mulligan') ),
         Chip( label: Text('Laurens') ),
       ],
     )

官方文档:https://api.flutter.dev/flutter/widgets/Wrap-class.html

目录
相关文章
|
4月前
|
编解码 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
【4月更文挑战第30天】Flutter框架助力移动应用实现响应式设计与自适应布局,通过层次化布局系统和`Widget`树管理,结合`BoxConstraints`定义尺寸范围,实现自适应。利用`MediaQuery`获取设备信息,调整布局以适应不同屏幕。`FractionallySizedBox`按比例设定尺寸,`LayoutBuilder`动态计算布局。借助这些工具,开发者能创建跨屏幕尺寸、方向兼容的应用,提升用户体验。
115 0
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
|
4月前
|
开发框架 前端开发 数据安全/隐私保护
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
【4月更文挑战第30天】本文探讨了Flutter的布局和样式设计,关键点包括:1) 布局基础如Column、Row和Stack用于创建复杂结构;2) Container、Center和Expanded等常用组件的作用;3) Theme和Decoration实现全局样式和组件装饰;4) 实战应用如登录界面和列表页面的构建;5) 响应式布局利用MediaQuery和弹性组件适应不同屏幕;6) 性能优化,避免过度复杂设计。了解并掌握这些,有助于开发者创建高效美观的Flutter应用。
118 0
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
|
2月前
|
容器
flutter 布局管理【详解】
flutter 布局管理【详解】
25 3
|
2月前
Flutter-自定义折叠流布局实现
Flutter-自定义折叠流布局实现
34 0
|
4月前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。
|
4月前
|
容器
Flutter笔记:Box协议的布局约束原理与应用
Flutter笔记:Box协议的布局约束原理与应用
81 0
|
4月前
|
开发者 索引 容器
Flutter开发笔记:Flutter 布局相关组件
Flutter开发笔记:Flutter 布局相关组件
218 0
Flutter灵活布局要掌握的两个控件Expanded和Flexible
Flutter灵活布局要掌握的两个控件Expanded和Flexible
利用Flutter的LayoutBuilder、BoxConstraints创建自适应布局控件
利用Flutter的LayoutBuilder、BoxConstraints创建自适应布局控件
|
Dart 容器
flutter两个非常常用的布局小空间SizedBox和Divider
flutter两个非常常用的布局小空间SizedBox和Divider
下一篇
DDNS