當(dāng)兩個小組件彼此之間需要一些空間時费奸，在它們之間繪制一條線會很有幫助,跟我一起嘗試下吧帜篇，先來看看它的屬性
Divider({
Key key,
this.height,
this.thickness,
this.indent,
this.endIndent,
this.color,
})
- key 組件的標(biāo)識符
- height 分割線的高度
- thickness 繪制的線條的粗細(xì)
- indent 向前的間隔
- endIndent 向后的間隔
- color 分割線的顏色
讓我們來簡單的使用一下
class DividerWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Divider展示'),
centerTitle: true,
),
body: Center(
child: SizedBox(
width: 200,
child: Column(
children: <Widget>[
Spacer(),
Container(
height: 200,
width: 200,
color: Colors.blue,
),
const Divider(
thickness: 5,
color: Colors.redAccent,
),
const Divider(
thickness: 5,
color: Colors.green,
),
const Divider(
thickness: 5,
color: Colors.orange,
),
Container(
height: 200,
width: 200,
color: Colors.red,
),
Spacer(),
],
),
),
),
);
}
}
-
效果如何：
1586248693888.jpg - 除了這樣我們還可以配置全局的玩法-MaterialApp
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.orange,
dividerTheme: DividerThemeData(
color: Colors.orange,
space: 10,
thickness: 5,
indent: 20,
endIndent: 20),
),
home: DividerWidget(),
);
}
}
注意此時的高度變成了space向抢，然后將上面的Divider的屬性設(shè)置去掉直接寫成const Divider()效果如下：
全局效果.jpg
