学习参考文章:
Flutter 流式布局、自动换行(Wrap、Flow)
direction: Axis.horizontal, // 排列方向,默认水平方向排列
alignment: WrapAlignment.start, // 子控件在主轴上的对齐方式
spacing: 5.0, // 主轴上子控件中间的间距
runAlignment: WrapAlignment.start, // 子控件在交叉轴上的对齐方式
runSpacing: 10.0, // 交叉轴上子控件之间的间距
crossAxisAlignment: WrapCrossAlignment.start, // 交叉轴上子控件的对齐方式
textDirection: TextDirection.ltr, // 水平方向上子控件的起始位置
verticalDirection: VerticalDirection.down, // 垂直方向上子控件的起始位置
效果图:
1560495777312.jpg
部分代码:
new Container(
margin: new EdgeInsets.only(
left: 10.0, right: 10.0, top: 10.0),
child: new Wrap(
direction: Axis.horizontal, // 排列方向,默认水平方向排列
alignment: WrapAlignment.start, // 子控件在主轴上的对齐方式
spacing: 5.0, // 主轴上子控件中间的间距
runAlignment: WrapAlignment.start, // 子控件在交叉轴上的对齐方式
runSpacing: 10.0, // 交叉轴上子控件之间的间距
crossAxisAlignment: WrapCrossAlignment.start, // 交叉轴上子控件的对齐方式
textDirection: TextDirection.ltr, // 水平方向上子控件的起始位置
verticalDirection: VerticalDirection.down, // 垂直方向上子控件的起始位置
children: <Widget>[
new ScreenButton(
title: "不限",
isSelected: true,
),
new ScreenButton(
title: "1月以下",
isSelected: false,
itemWidth: 90.0,
),
new ScreenButton(
title: "1月",
isSelected: false,
),
new ScreenButton(
title: "2月",
isSelected: false,
),
new ScreenButton(
title: "3月",
isSelected: false,
),
new ScreenButton(
title: "6月",
isSelected: false,
),
new ScreenButton(
title: "12月",
isSelected: false,
),
],
),
),
import 'package:flutter/cupertino.dart';
import 'package:moka_flutter/config/config.dart';
class ScreenButton extends StatefulWidget {
ScreenButton({Key key, this.title, this.isSelected, this.itemWidth = 70.0}): super(key: key);
final String title;
final bool isSelected;
final double itemWidth;
@override
_ScreenButtonState createState() => new _ScreenButtonState();
}
class _ScreenButtonState extends State<ScreenButton> {
@override
Widget build(BuildContext context) {
return new Container(
color: MkColor.white,
// margin: new EdgeInsets.only(right: 5.0),
child: new GestureDetector(
onTap: null,
child: new Container(
alignment: Alignment.center,
padding: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 3.0),
decoration: new BoxDecoration(
border: new Border.all(color: widget.isSelected ? MkColor.textBlue : MkColor.textGray),
borderRadius: new BorderRadius.circular(16.0),
),
height: 32.0,
width: widget.itemWidth,
child: new Text(
widget.title,
style: new TextStyle(
fontSize: 14.0,
color: widget.isSelected ? MkColor.textBlue : MkColor.textGray,
),
),
),
),
);
}
}
网友评论