Flutter 布局练习之Wrap组件

2019/12/27 18:44:57 | 阅352 来源:好空间网络 [打印] [关闭]
 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "多窗口切换标题",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Wrap布局练习"),
        ),
        body: MyWrap(),
      ),
    );
  }
}

class MyWrap extends StatelessWidget {
  ///wrap流式布局,当一行放不下的时候他会自动换行
  ///
  @override
  Widget build(BuildContext context) {
    return Wrap(
      ///主轴对齐方式,默认水平 vertical为垂直对齐
      //direction: Axis.vertical,
      ///子widget对齐方式
      alignment: WrapAlignment.center,
      ///主轴说元素的间距
      spacing: 10,
      ///次轴的元素间距
      runSpacing: 20,

      children: <Widget>[
        MyButton("第一季"),
        MyButton("第一季"),
        MyButton("第一季长度不一样"),
        MyButton("第一季"),
        MyButton("第一季"),
        MyButton("第一季"),
        MyButton("第一季"),
        MyButton("第一季之第N季"),
        MyButton("第一季"),
        MyButton("第一季"),
        MyButton("第一季"),
      ],
    );
  }
}

class MyButton extends StatelessWidget {
  final String tile;
  MyButton(this.tile, {Key key});

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(tile),
      onPressed: () {},
    );
  }
}

效果图:


QQ图片20191226174025.png

经营许可证ICP:皖B2-20100052 公司邮箱:zcdnsz@jspkongjian.net
Copyright © 2004-2015, 安徽好空间网络科技有限公司 版权所有 , 本站素材部分来源于网络,如有侵权请告知删除。