Wrap组件
Wrap可以实现流布局,单行的Wrap跟Row表现几乎一致,单列的Wrap则跟Colum表现几乎一致.但是Row和Column都是单行单列的,Wrap则突破了这个限制,mainAxis上空间不足时,则向crossAxis上去扩展显示.
- Flutter RaisedButton(按钮组件)
Flutter中通过RaisedButton定义一个按钮,RaisedButton里面有很多的参数这页中只简单使用一下
先简单定义一个按钮组件,用于后面Wrap组件来排列
/**
* 自定义一个按钮组件
* 构造函数接收外部传入的文字
*/
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: (){}, //- 点击事件
);
}
}
Wrap 属性
| 属性 | 说明 |
|---|---|
| direction | 主轴的方向,默认是水平方向 |
| alignment | 主轴的对齐方式 |
| spacing | 主轴方向的间距 |
| textDirection | 文本方向 |
| verticalDirection | 定义了children摆放顺序,默认是down,见Flex相关属性介绍 |
| runAlignment | run的对齐方式,run可以理解为新的行或者列,如果是水平方向布局的话,run可以结尾新的一行 |
| runSpacing | run的间距 |
direction 属性如果想要实现纵轴的排列方式(从上往下),我们可以这样设置:
Wrap(
direction:Axis.vertical
)
我们现在把Wrap组件引入,并且调用前面写的按钮组件.
import "package:flutter/material.dart";
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: MaterialApp(
title: 'belineApp',
home: Scaffold(
appBar: AppBar(
title: Text('Wrap'),
),
body: LayoutDemo()
)
)
);
}
}
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Wrap(
spacing: 10, //- 横轴元素间的间距
runSpacing: 10, //- 纵轴间距
alignment: WrapAlignment.spaceBetween, //- 两边对齐
children: <Widget>[
MyButton('标签一'),
MyButton('标签二'),
MyButton('标签三标签3'),
MyButton('标签四'),
MyButton('标签五标签554'),
MyButton('标签六'),
MyButton('标签七32131231'),
MyButton('标签八'),
],
);
}
}
/**
* 自定义一个按钮组件
* 构造函数接收外部传入的文字
*/
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: (){}, //- 点击事件
);
}
}
页面效果:
image.png
