当两个小组件彼此之间需要一些空间时,在它们之间绘制一条线会很有帮助,跟我一起尝试下吧,先来看看它的属性
Divider({
Key key,
this.height,
this.thickness,
this.indent,
this.endIndent,
this.color,
})
- key 组件的标识符
- height 分割线的高度
- thickness 绘制的线条的粗细
- 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(),
],
),
),
),
);
}
}
-
效果如何:
- 除了这样我们还可以配置全局的玩法-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的属性设置去掉直接写成const Divider()效果如下: