zoukankan      html  css  js  c++  java
  • Flutter Wrap 组件实现流布局

    Wrap 可以实现流布局,单行的 Wrap Row 表现几乎一致,单列的 Wrap 则跟 Row 表 现几乎一致。但 Row Column 都是单行单列的,Wrap 则突破了这个限制,mainAxis 上空 间不足时,则向 crossAxis 上去扩展显示。

    属性

    说明

    direction

    主轴的方向,默认水平

    alignment

    主轴的对其方式

    spacing

    主轴方向上的间距

    textDirection

    文本方向

    verticalDirection

    定义了 children 摆放顺序,默认是 down,见 Flex 相关属性介绍。

    runAlignment

    run 的对齐方式。run 可以理解为新的行或者 列,如果是水平方向布局的话,run 可以理解 为新的一行

    runSpacing

    run 的间距

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) { 
        return MaterialApp(
            home: Scaffold(
            appBar: AppBar(title: Text('FlutterDemo')),
            body: LayoutDemo(),
          ));
      }
    }
    class LayoutDemo extends StatelessWidget {
     @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Container(
          height: 600,
           400,
          color: Colors.pink,
          padding: EdgeInsets.all(10),
          child: Wrap(
              spacing:10,
              runSpacing: 10,
              direction: Axis.vertical,
              // alignment:WrapAlignment.spaceEvenly,
              // runAlignment: WrapAlignment.center,
              children: <Widget>[
                    MyButton("第1集"),
                    MyButton("第2集"),
                    MyButton("第3集"),
                    MyButton("第4集"),
                    MyButton("第5集"),
                    MyButton("第6集"),
                    MyButton("第7集"),
                    MyButton("第8集"),
                    MyButton("第9集"),
                    MyButton("第10集"),
                    MyButton("第11集"),
                    MyButton("第13集"),
                    MyButton("第14集"),
                    MyButton("第15集"),
                    MyButton("第16集"),
                    MyButton("第17集"),
                    MyButton("第18集"),
                    MyButton("第19集"),
                    MyButton("第20集"),
                    MyButton("第21集"),
              ],
            ),
        );
      }
    }
    
    class MyButton extends StatelessWidget{
      final String text;
      const MyButton(this.text,{Key key}) : super(key: key); 
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return RaisedButton(
          child: Text(this.text),
          textColor:Theme.of(context).accentColor,
          onPressed: (){        
          }
        );
      }
    }
  • 相关阅读:
    CPU 常识(计算机组成原理)
    设置动态网站,要求访问端口 8998
    未知高宽的div在其父级div中垂直居中显示
    ES6 学习 -- Generator函数
    ES6 学习 -- Class继承
    ES6 学习 -- Class
    ES6 学习 -- 字符串模板
    ES6 学习 -- 字符串新增方法
    ES6 学习 -- Promise对象
    ES6 学习 -- Set和Map数据结构
  • 原文地址:https://www.cnblogs.com/loaderman/p/11181873.html
Copyright © 2011-2022 走看看