Wrap組件
Wrap可以實(shí)現(xiàn)流布局,單行的Wrap跟Row表現(xiàn)幾乎一致,單列的Wrap則跟Colum表現(xiàn)幾乎一致.但是Row和Column都是單行單列的,Wrap則突破了這個限制,mainAxis上空間不足時,則向crossAxis上去擴(kuò)展顯示.
- Flutter RaisedButton(按鈕組件)
Flutter中通過RaisedButton定義一個按鈕,RaisedButton里面有很多的參數(shù)這頁中只簡單使用一下
先簡單定義一個按鈕組件,用于后面Wrap組件來排列
/**
* 自定義一個按鈕組件
* 構(gòu)造函數(shù)接收外部傳入的文字
*/
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: (){}, //- 點(diǎn)擊事件
);
}
}
Wrap 屬性
| 屬性 | 說明 |
|---|---|
| direction | 主軸的方向,默認(rèn)是水平方向 |
| alignment | 主軸的對齊方式 |
| spacing | 主軸方向的間距 |
| textDirection | 文本方向 |
| verticalDirection | 定義了children擺放順序,默認(rèn)是down,見Flex相關(guān)屬性介紹 |
| runAlignment | run的對齊方式,run可以理解為新的行或者列,如果是水平方向布局的話,run可以結(jié)尾新的一行 |
| runSpacing | run的間距 |
direction 屬性如果想要實(shí)現(xiàn)縱軸的排列方式(從上往下),我們可以這樣設(shè)置:
Wrap(
direction:Axis.vertical
)
我們現(xiàn)在把Wrap組件引入,并且調(diào)用前面寫的按鈕組件.
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('標(biāo)簽一'),
MyButton('標(biāo)簽二'),
MyButton('標(biāo)簽三標(biāo)簽3'),
MyButton('標(biāo)簽四'),
MyButton('標(biāo)簽五標(biāo)簽554'),
MyButton('標(biāo)簽六'),
MyButton('標(biāo)簽七32131231'),
MyButton('標(biāo)簽八'),
],
);
}
}
/**
* 自定義一個按鈕組件
* 構(gòu)造函數(shù)接收外部傳入的文字
*/
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: (){}, //- 點(diǎn)擊事件
);
}
}
頁面效果:
image.png
