it营大地专栏

Flutter 页面布局 页面布局Wrap组件

发布于 8 个月前 作者 phonegap100 233 次浏览 来自 分享

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

1、Flutter Wrap组件属性以及说明

direction 主轴的方向,默认水平 alignment 主轴的对其方式 spacing 主轴方向上的间距 textDirection 文本方向 verticalDirection 定义了children摆放顺序,默认是down,见Flex相关属性介绍。 runAlignment run的对齐方式。run可以理解为新的行或者列,如果是水平方向布局的话,run可以理解为新的一行 runSpacing run的间距

2、Flutter Wrap组件实例演示

f.png

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
        appBar: AppBar(title: Text('FlutterDemo')),
        body: LayoutDemo(),
      ));
  }
}
class LayoutDemo extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Wrap(
      spacing: 10,
      runSpacing: 10,
      alignment: WrapAlignment.spaceEvenly,
      
      children: <Widget>[
           MyButton("第1集"),
            MyButton("第2集"),
            MyButton("第3集"),
            MyButton("第4集"),
            MyButton("第5集"),
            MyButton("第6集第6集"),
            MyButton("第7集"),
            MyButton("第8集第6集"),
            MyButton("第9集"),
            MyButton("第10集"),
            MyButton("第11集"),
      ],
    );
  }
}

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: (){        
      },
    );
  }
}
回到顶部