专栏首页flutter开发者[Flutter Widget] Wrap

[Flutter Widget] Wrap

前言


在前面的文章中我们讲了很多Widget的用法,包括简单的Widget和复杂一点的布局,其实归根到底都是为了解决我们在界面布局上的需求,最近很多童鞋私信我Flutter中有没有类似Ios,Android上的流式布局,答案是肯定的啊,既然都说到这里了,今天我们就来看下Flutter中强大的流式布局吧。

流式布局是什么

其实理解起来很简单,无论在终端还是Web端每个屏幕都有自己的尺寸,当然每个存在于屏幕上的组件也会有自己的尺寸。

当然在我们知道每个组件尺寸或者屏幕尺寸固定的情况下我们可以很好地来布局我们的组件来达到最合适的显示效果。

但是如果我们的组件的尺寸是不固定的呢?在这种情况下我们的组件就很有可能会超出屏幕的范围,或者达不到我们预期的效果。

所以,我们就需要借助于流式布局来解决这个问题。流式布局会根据当前屏幕的尺寸和当前组件尺寸来看是否进行换行显示。

如:

当我们想要在一行显示多个Button时就会出现如图的问题,超出屏幕的Widget并不会显示。

但是,我们其实想要的是这样的效果

所以,今天我们来看下Flutter中的流式布局

Wrap

Wrap的中文意思就是包裹的意思,真直接,哈哈,用起来也是很直接的。

好吧还是看构造方法:

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,//direction为Vertical时排序顺序
   List<Widget> children = const <Widget>[],//widgets
 })

好吧还是来举个简单的例子:

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Wrap"),
        centerTitle: true,
      ),
      body:
        Wrap(
          spacing: 10.0,
          direction: Axis.horizontal,
          alignment: WrapAlignment.start,
          children: <Widget>[
            MyButton("第1集"),
            MyButton("第2集"),
            MyButton("第3集"),
            MyButton("第4集"),
            MyButton("第5集"),
            MyButton("第6集"),
            MyButton("第7集"),
            MyButton("第8集"),
            MyButton("第9集"),
            MyButton("第10集"),
            MyButton("第11集"),

          ],

      ),
    );
  }
}

class MyButton extends StatelessWidget {
  final text;

  MyButton(this.text);

  @override
  Widget build(BuildContext context) {
    return Container(

        child: RaisedButton(
          onPressed: () {
            Scaffold.of(context).showSnackBar(new SnackBar(
              content: new Text(text),
              action: new SnackBarAction(
                label: "撤回",
                onPressed: () {},
              ),
            ));
          },
          child: Text(text),
        ));
  }
}

我们自定义了一个MyButton,然后让Wrap来包裹住这些Button,设置水平间隔为10像素(垂直方向默认有大约10像素的间隔)

运行出来的效果如下:

接下来我,我们尝试修改alignment属性来看下效果

当然,我们也可以更改direction为纵向来看下效果:

我们设置spacing为10.0,设置runSpacing为10.0,设置direction为vertical

Wrap(
         spacing: 10.0,
         runSpacing: 10.0,
         direction: Axis.vertical,
         alignment: WrapAlignment.start,
         children: <Widget>[
           MyButton("第1集"),
           MyButton("第2集"),
           MyButton("第3集"),
           MyButton("第4集"),
           MyButton("第5集"),
           MyButton("第6集"),
           MyButton("第7集"),
           MyButton("第8集"),
           MyButton("第9集"),
           MyButton("第10集"),
           MyButton("第11集"),

         ],

     )

嗯,来看下效果:

修改 textDirection: TextDirection.rtl属性,让它从右往左排序,再来看下效果

话说显示效果还是真的奇怪呢!

当然,我们现在的效果还不是很好看,我们可以根据以前讲到的知识来给优化下啊。

小结

  • 使用Wrap可以很轻松的实现流式布局效果
  • Wrap支持设置流式布局是纵向显示或者是横向显示
  • 可以使用alignment属性来控制widgets的布局方式

试一试

根据以前讲到的Widget知识,实现如上的效果。

本文分享自微信公众号 - flutter开发者(Flutter_Developers),作者:Flutter开发者

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-09-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [Flutter Widget]Tooltip

    在前面的文章中我们讲到了Wrap的用法,介绍了Flutter中的流式布局,在文章的最后让大家实现如下效果:

    flyou
  • 自定义View【2】

    在前面的文章中我们学习了部分绘制的相关方法,在本篇文章中我们会继续再介绍一些常用的绘制方法。

    flyou
  • Flutter中的本地存储

    在上一篇文章中我们学习了在Dart中的异步操作,你以为我没事啊还特地给你们专门写一篇文章啊,当然是有用的啊。

    flyou
  • Python数字和字符串学习笔记

    其中数字、字符串、元组是不可变的,列表、字典是可变的。 对不可变类型的变量重新赋值,实际上是重新创建一个不可变类型的对象,并将原来的变量重新指向新创建的对象(如...

    没有故事的陈师傅
  • 树莓派怎么开启SSH服务

    SSH(Secure Shell)是一种网络协议,用于计算机之间的加密登录,如果用户在本地用SSH登录远程另一台计算机,我们可以认为这种登录方式是安全的,即使中...

    小雨编程
  • Dart服务器端 shelf_rest包 原

    shelf_rest是shelf_route的一个替代品。 它支持shelf_route的所有功能,增加了很多功能以减少样板。

    南郭先生
  • 聊聊flink taskmanager的jvm-exit-on-oom配置

    本文主要研究一下flink taskmanager的jvm-exit-on-oom配置

    codecraft
  • 懂一点前端—Vue快速入门

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,是当下很火的一个 JavaScript MVVM 库,是以 数据驱动和组件...

    我没有三颗心脏
  • Check failed: stream->parent()->GetConvolveAlgorithms(&algorithms)解决办法

    由于我很早就在 GitHub 下载了 TensorFlow 的源码库没有更新,在运行 TensorFlow 官方的 CNN 例子的时候,总是报 ImportEr...

    Alan Lee
  • http编程系列(二)——java爬虫实现刷个人博客的访问量

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚

扫码关注云+社区

领取腾讯云代金券