flutter text 左对齐_Flutter 基础布局Widgets之Wrap详解

概述

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 children = const [],

})

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: [

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,

)),

)),

],

),

);

}

}

示例图片：