Flutter-Wrap的使用说明

最新推荐文章于 2024-04-08 02:28:22 发布
最新推荐文章于 2024-04-08 02:28:22 发布
阅读量3.4k 收藏
点赞数
分类专栏： Flutter专题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvsonghai/article/details/104238338
版权

Flutter-Wrap的使用说明

Wrap可以进行水平方向或者垂直方向上的布局,在一行或者一列现实不完所有的widgets的时候，能够根据当前宽度或者高度自动换行。

Wrap的定义

Wrap定义的属性不多，查看如下：

Wrap({
    Key key,
    this.direction = Axis.horizontal,//设置水平局部还是垂直布局
    this.alignment = WrapAlignment.start,//设置元素的其实位置，
    
    this.spacing = 0.0,//在direction: Axis.horizontal的时候指左右两个Widget的间距,在direction: Axis.vertical的时候指上下两个widget的间距
    this.runAlignment = WrapAlignment.start,//设置widget与widget在水平或者垂直轴上的间距
    WrapAlignment.start//每一行（列）子Widget在纵（横）轴上的排列，全部子Widget从顶部开始展示
    WrapAlignment.end//每一行（列）子Widget在纵（横）轴上的排列，全部子Widget挨着底部展示
    WrapAlignment.center//每一行（列）子Widget在纵（横）轴上的排列，全部子widget在中间展示
    WrapAlignment.spaceBetween//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget挨着边展示
    WrapAlignment.spaceAround//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离的一半
    WrapAlignment.spaceAround//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离相等
    this.runSpacing = 0.0,//在direction: Axis.horizontal的时候指上下两个Widget的间距,在direction: Axis.vertical的时候指左右两个widget的间距
    this.crossAxisAlignment = WrapCrossAlignment.start,//水平排列时控制全部子widgets的上部对齐，垂直排列时控制全部子widgets的左边对齐
    WrapCrossAlignment.end//水平排列时控制全部子widgets的下部对齐，垂直排列时控制全部子widgets的又边对齐
    WrapCrossAlignment.center//设置每一行的子Widgets剧中对齐
    this.textDirection,//设置每一行（列）的展示 
    textDirection: TextDirection.ltr//设置每一行（列）的子Widgets从左到右（从上到下）正常显示，正序排列
    textDirection: TextDirection.rtl设置每一行（列）的子Widgets倒序显示
    this.verticalDirection = VerticalDirection.down,//设置行列widgets的展示，正常显示
  	VerticalDirection.up//倒序展示，比如，在direction: Axis.horizontal时有1、2、3行widgets，设置为up后，展示为3、2、1  
    List<Widget> children = const <Widget>[],//一组子widgets
})

####Wrap的简单使用

可以把Wrap当作搜索历史的展示用，代码如下：

class WrapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Wrap(
//      direction: Axis.vertical,
    direction: Axis.horizontal,
       spacing: 16.0, //在direction: Axis.horizontal的时候指左右两个Widget的间距,在direction: Axis.vertical的时候指上下两个widget的间距
       runSpacing: 16.0,//在direction: Axis.horizontal的时候指上下两个Widget的间距,在direction: Axis.vertical的时候指左右两个widget的间距
      alignment: WrapAlignment.start,
       crossAxisAlignment: WrapCrossAlignment.start,
       textDirection: TextDirection.ltr,
//       verticalDirection: VerticalDirection.up,
       children: <Widget>[
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
           color: Colors.orange,
             child: Text('历史记录1'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.redAccent,
             child: Text('历史记录2'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.blue,
             child: Text('历史记录3'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.greenAccent,
             child: Text('历史记录4'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.amber,
             child: Text('历史记录5'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.indigoAccent,
             child: Text('历史记录6'),
           ),
         ),
       ],
     );
  }
}

这里模拟有6条搜索历史记录，依次进行排列；运行起来展示效果如下：
在这里插入图片描述

wrap的verticalDirection和textDirection的详细说明使用
wrap的verticalDirection和textDirection的详细说明使用1、

现在先看一组正常的展示，也就是说：

textDirection: TextDirection.ltr,

verticalDirection: VerticalDirection.down,

代码如下：

class WrapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Wrap(
//      direction: Axis.vertical,
    direction: Axis.horizontal,
       spacing: 16.0, //在direction: Axis.horizontal的时候指左右两个Widget的间距,在direction: Axis.vertical的时候指上下两个widget的间距
       runSpacing: 16.0,//在direction: Axis.horizontal的时候指上下两个Widget的间距,在direction: Axis.vertical的时候指左右两个widget的间距
      alignment: WrapAlignment.spaceEvenly,
       crossAxisAlignment: WrapCrossAlignment.end,
       textDirection: TextDirection.ltr,
       verticalDirection: VerticalDirection.down,
       children: <Widget>[
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 360.0,
           color: Colors.orange,
             child: Text('历史记录1'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 106.0,
             height: 36.0,
             color: Colors.redAccent,
             child: Text('历史记录2'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 360.0,
             color: Colors.blue,
             child: Text('历史记录3'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 106.0,
             height: 36.0,
             color: Colors.greenAccent,
             child: Text('历史记录4'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.amber,
             child: Text('历史记录5'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 106.0,
             height: 36.0,
             color: Colors.indigoAccent,
             child: Text('历史记录6'),
           ),
         ),
       ],
     );
  }
}

运行效果，可以看出，每一行的widgets都是从左到右正常序列展示的
在这里插入图片描述

wrap的verticalDirection和textDirection的详细说明使用2、

现在设置倒序展示的wrap中子widgets

textDirection: TextDirection.rtl,

verticalDirection: VerticalDirection.up,

演示代码：

class WrapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Wrap(
//      direction: Axis.vertical,
    direction: Axis.horizontal,
       spacing: 16.0, //在direction: Axis.horizontal的时候指左右两个Widget的间距,在direction: Axis.vertical的时候指上下两个widget的间距
       runSpacing: 16.0,//在direction: Axis.horizontal的时候指上下两个Widget的间距,在direction: Axis.vertical的时候指左右两个widget的间距
      alignment: WrapAlignment.spaceEvenly,
       crossAxisAlignment: WrapCrossAlignment.end,
       textDirection: TextDirection.rtl,
       verticalDirection: VerticalDirection.up,
       children: <Widget>[
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 360.0,
           color: Colors.orange,
             child: Text('历史记录1'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 106.0,
             height: 36.0,
             color: Colors.redAccent,
             child: Text('历史记录2'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 360.0,
             color: Colors.blue,
             child: Text('历史记录3'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 106.0,
             height: 36.0,
             color: Colors.greenAccent,
             child: Text('历史记录4'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.amber,
             child: Text('历史记录5'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 106.0,
             height: 36.0,
             color: Colors.indigoAccent,
             child: Text('历史记录6'),
           ),
         ),
       ],
     );
  }
}

对于上面的代码，仅做了很小的改动，运行展示效果如下：
在这里插入图片描述

从运行效果上可以看出：

textDirection: TextDirection.rtl,控制着每一行的widgets的倒序排列，

verticalDirection: VerticalDirection.up,控制着以行为单位的widgets的倒序展示。

**备注：**在后续的使用过程中，请根据实际场景使用Wrap这个Widget。

songhai11
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
table 没有铺满宽度_Google Flutter 布局（九）-Flow、Table、Wrap详解
weixin_39859220的博客
12-04 645
本文主要介绍Flutter布局中的Flow、Table、Wrap控件，详细介绍了其布局行为以及使用场景，并对源码进行了分析。1.1 简介Flow按照解释的那样，是一个实现流式布局算法的控件。流式布局在大前端是很常见的布局方式，但是一般使用Flow很少，因为其过于复杂，很多场景下都会去使用Wrap。1.2 布局行为Flow官方介绍是一个对child尺寸以及位置调整非常高效的控件，主要是得益于其Flo...
Flutter 中 Wrap 的使用详解（含对比图） _ Flutter Widgets
m0_66264569的博客
01-21 1206
这是我参与更文挑战的第9天，活动详情查看： 更文挑战 前言 之前两篇我们聊了滚动列表 ListView 和 GridView ，这篇我们来聊聊 Wrap ，看字面意思就是「包裹」，与列表型 Widget 区别在于他是可以根据子项 Widget 的大小来实现自动排列的，而且自身不支持滚动。 看看效果 使用方式 因为 Wrap 使用是比较简单的，难点在于各个参数的调配上，所以我们先看看基本的构建方法，然后聊聊各个属性的使用效果 // 简单的构建 Wrap( children: List.generate(2
flutter——wrap的使用
z15267429952的博客
01-26 253
【代码】flutter——wrap的使用。
Flutter中的Wrap
Dream It Possible
07-14 6433
我们在flutter中使用能够包含多个child的widget的时候，经常会遇到超出边界范围的情况，尤其是在Column和Row的情况下，那么我们有没有什么好的解决办法呢？答案就是今天我们要讲解的Wrap。Row和Column中可以包含多个子widget，如果子widget超出了Row或者Column的范围会出现什么情况呢？我们以Row的情况举个例子： 上面的例子中，我们在Row中添加了几个YellowBox，YellowBox是一个width=100,height=50的长方形： 运行上面的代码，
Warp - flutter
LiErDan的博客
11-30 99
class Layout extends StatelessWidget { @override Widget build(BuildContext context) { return Wrap( spacing: 5, //元素横向间隔 runSpacing: 5, //元素上下间隔 alignment: WrapAlignment.end, //最后一行元素的对其方式, 上面行的元素都占满了空间, 所以不存在对齐问题 ch
Flutter 流式布局之Wrap详解
08-25 8181
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-embedded-linux:Flutter的嵌入式Linux嵌入式
03-12
它还基于Windows的Flutter桌面实现，并且具有一些独特的功能可在嵌入式系统中使用。 目的与目标 我们的目标是在嵌入式系统中使用Flutter。 我们正在开发此嵌入器，以在嵌入式产品中使用Flutter。 最终，我们希望向...
flutter中使用基于flutter-sound的flutter-sound-record录音
01-20
本篇将详细讲解如何在Flutter中使用基于`flutter-sound`的`flutter-sound-record`库进行录音操作。 `flutter-sound`是一个强大的库，它为Flutter提供了音频播放、录制以及处理的功能。`flutter-sound-record`则是`...
flutter-internationalization：使用JSON文件进行Flutter国际化
02-04
Flutter国际化示例 在此示例中，Flutter可以通过使用json文件进行国际化。 这是Flutter的基本国际化示例。... cd flutter-internationalization\ flutter upgrade\ flutter run\ 使用的语言 土耳
Best-Flutter-UI-Templates：对所有人完全免费。 内置的Flutter Dart
02-17
4. **Flutter-Demo** 和 **Flutter-Examples**：这些标签表明这个项目可能包含演示和示例代码，可以帮助开发者学习和理解如何在实践中使用 Flutter 和 Dart。 5. **Flutter-Widget**：在 Flutter 中，一切皆为 ...
Flutter wrap组件
01-20
flutter wrap组件 写的搜索记录 import 'dart:core'; import 'package:flutter/material.dart'; // 使用换行 显示搜索记录 class WarpPage extends StatelessWidget { final List tags = [ 肯德基, 小哥哥你的东西掉了, 小姐姐好漂亮啊, 这个东西是啥, 哈哈哈, 好困啊, 今天好运, 明天好运来, 今年快结束了, 我累啊, 你写的什么代
flutter-pi：适用于Raspberry Pi的轻量级Flutter引擎嵌入器，无需X即可运行
02-05
使用flutter-pi的步骤大致如下： 1. **环境准备**：首先，你需要在树莓派上安装必要的软件，包括Dart SDK、OpenGL ES 2.0支持以及相关的库文件。 2. **获取flutter-pi**：从GitHub仓库克隆或下载flutter-pi项目到...
Flutter组件（Wrap）
m0_46527751的博客
01-13 268
Flutter组件Wrap Wrap可以进行水平方向或者垂直方向上的布局,在一行或者一列现实不完所有的widgets的时候，能够根据当前宽度或者高度自动换行。使用上和Row类似。 属性 说明 direction 主轴的方向，默认水平 alignment 主轴的对其方式 spacing 主轴方向上的间距 textDirection 文本方向 verticalDirection 定义了 children 摆放顺序，默认是 down，见Flex 相关属性介绍。 runAlign
Flutter页面布局：Wrap组件
weixin_46136019的博客
03-26 824
Wrap 可以实现流布局，单行的 Wrap 跟 Row 表现几乎一致，单列的 Wrap 则跟 Column 表现几乎一致。但 Row 与 Column 都是单行单列的，Wrap 则突破了这个限制，mainAxis 上空间不足时，则向crossAxis上去扩展显示，简单说就是如果你在x轴上进行布局，当x轴的元素溢出后他会自动扩展到另一行。
flutter 学习 Warp布局
Coding_Physical的专栏
12-14 690
效果： import 'package:flutter/material.dart'; import 'warp_demo.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo',
Flutter自动换行和两列布局（1）
augfun的博客
11-27 3965
Row和Column是Flex组件，是无法滚动的，如果没有足够的空间，flutter就提示溢出错误。 这种情况下，Expanded或Flexible组件可用作长文本的自动换行。 在Flutter文档中虽然没有明确说明，但是在主轴上如有内容超出空间，Expanded和Flexible会自动换行到纵轴。 1 起源 以下一步步来理解。 如下的场景： class MyApp extends StatelessWidget { // This widget is the ...
Flutter开发之——多组件布局容器-Wrap，爱了爱了
最新发布
2401_84149592的博客
04-08 657
),
Flutter Wrap 流布布局
senkai123的博客
10-29 767
flutter 流式布局，包含Wrap和Flow，我们一般只用Wrap，足够使用，Flow使用过于复杂 基本使用： Container( padding: EdgeInsets.all(8), child: Wrap( //水平距离 spacing: 10.0, //垂直距离 runSpacing: 8.0, ...
best-flutter-ui-templates
08-06
通过使用 best-flutter-ui-templates，开发者可以节省大量的时间与精力，避免从零开始设计并实现每个界面。这样，开发者可以更专注于业务逻辑的实现，加快项目的开发进度。 此外，best-flutter-ui-templates 还提供...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

songhai11

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

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

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

打赏作者

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

抵扣说明：

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

余额充值