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

港控/mmm° 2022-10-24 11:48 346阅读 0赞

概述

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,

)),

\],

);

示例图片：

![AAffA0nNPuCLAAAAAElFTkSuQmCC][]

[AAffA0nNPuCLAAAAAElFTkSuQmCC]:

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 "Flutter基础（十）布局Widget快速入门

相关 13Flutter页面布局 Wrap组件

相关 Flutter 多子 Widget 布局之线性布局 Row、Column

相关 Flutter 单子 Widget 布局之 Container、Padding 、 Center 、Align

相关 flutter Widget基础

相关 Flutter Text详解

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

相关 Flutter Widget 静态布局实战

相关 Flutter Wrap & Chip

相关 Flutter Widget => Text