继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Flutter 基础布局Widgets之Wrap详解

若数
关注TA
已关注
手记 68
粉丝 23
获赞 95

概述

Wrap好似Row和Column的结合,在横轴的表现和Row一致,而竖轴的表现和Column一致,比如当’this.direction = Axis.horizontal’时,横轴()的child放置不下时就会在竖轴自动扩展一行。

构造函数

Wrap({
    Key key,
    this.direction = Axis.horizontal,
    this.alignment = WrapAlignment.start,
    this.spacing = 0.0,
    this.runAlignment = WrapAlignment.start,
    this.runSpacing = 0.0,
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    List<Widget> children = const <Widget>[],
  })
  • direction 扩展方式 比如横向堆砌
  • alignment 对齐方式
  • spacing 主轴空隙间距
  • runAlignment run的对齐方式
  • runSpacing run空隙间距
  • crossAxisAlignment 交叉轴对齐方式
  • textDirection 文本对齐方向
  • verticalDirection 确定垂直放置子元素的顺序,以及如何在垂直方向上解释开始和结束,默认down
  • children 需要放置的组件列表

实例代码

//  Wrap

import 'package:flutter/material.dart';

class WrapLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text('Wrap')),
      // 创建换行布局
      body: Wrap(
        // 扩展方式,横向堆砌
        direction: Axis.horizontal,
        // 对齐方式
        alignment: WrapAlignment.start,
        // 主轴空隙间距
        spacing: 0,
        // run的对齐方式
        runAlignment: WrapAlignment.center,
        // run空隙间距
        runSpacing: 10,
        // 交叉轴对齐方式
        crossAxisAlignment: WrapCrossAlignment.end, 
        // 文本对齐方向
        textDirection: TextDirection.ltr,
        // 确定垂直放置子元素的顺序,以及如何在垂直方向上解释开始和结束。 默认down
        verticalDirection: VerticalDirection.down,
        children: <Widget>[
          Container(
              padding: EdgeInsets.symmetric(vertical: 16, horizontal: 8),
              child: Chip(
                label: Container(
                    padding: EdgeInsets.all(2),
                    constraints: BoxConstraints(
                        // maxHeight: 30,
                        // maxWidth: 100,
                        minHeight: 10,
                        minWidth: 10),
                    decoration: BoxDecoration(
                        // color: Colors.blueAccent
                        ),
                    child: Text(
                      'hello',
                      style: TextStyle(color: Colors.blueAccent, fontSize: 30),
                      overflow: TextOverflow.fade,
                    )),
              )),
          Container(
              padding: EdgeInsets.symmetric(vertical: 16, horizontal: 8),
              child: Chip(
                label: Container(
                    padding: EdgeInsets.all(2),
                    constraints: BoxConstraints(
                        // maxHeight: 30,
                        // maxWidth: 100,
                        minHeight: 10,
                        minWidth: 10),
                    decoration: BoxDecoration(
                        // color: Colors.blueAccent
                        ),
                    child: Text(
                      'hello',
                      style: TextStyle(color: Colors.blueAccent, fontSize: 30),
                      overflow: TextOverflow.fade,
                    )),
              )),
          Container(
              padding: EdgeInsets.symmetric(vertical: 16, horizontal: 8),
              child: Chip(
                label: Container(
                    padding: EdgeInsets.all(2),
                    constraints: BoxConstraints(
                        // maxHeight: 30,
                        // maxWidth: 100,
                        minHeight: 10,
                        minWidth: 10),
                    decoration: BoxDecoration(
                        // color: Colors.blueAccent
                        ),
                    child: Text(
                      'hello',
                      style: TextStyle(color: Colors.blueAccent, fontSize: 30),
                      overflow: TextOverflow.fade,
                    )),
              )),
          Container(
              padding: EdgeInsets.symmetric(vertical: 16, horizontal: 8),
              child: Chip(
                label: Container(
                    padding: EdgeInsets.all(2),
                    constraints: BoxConstraints(
                        // maxHeight: 30,
                        // maxWidth: 100,
                        minHeight: 10,
                        minWidth: 10),
                    decoration: BoxDecoration(
                        // color: Colors.blueAccent
                        ),
                    child: Text(
                      'hello',
                      style: TextStyle(color: Colors.blueAccent, fontSize: 30),
                      overflow: TextOverflow.fade,
                    )),
              )),
          Container(
              padding: EdgeInsets.symmetric(vertical: 16, horizontal: 8),
              child: Chip(
                label: Container(
                    padding: EdgeInsets.all(2),
                    constraints: BoxConstraints(
                        // maxHeight: 30,
                        // maxWidth: 100,
                        minHeight: 10,
                        minWidth: 10),
                    decoration: BoxDecoration(
                        // color: Colors.blueAccent
                        ),
                    child: Text(
                      'hello',
                      style: TextStyle(color: Colors.blueAccent, fontSize: 30),
                      overflow: TextOverflow.fade,
                    )),
              )),
        ],
      ),
    );
  }
}

示例图片:
1FA0A151323C2F5BB47039D767F9F02C.png

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP