Flutter:分割线组件Divider和VerticalDiVider
简介分割线是也是比较常用的组件,本文主要介绍下Divider和VerticalDiVider的使用方法。
分割线的属性说明:
- indent: 起点缩进距离
- endIndent: 终点缩进距离
- color: 分割线颜色
- height: 分割线区域的高度,并非分割线的高度
- thickness: 分割线的厚度,真正的分割线的高度
一、水平分割线:Divider
import 'package:flutter/material.dart';
class DividerWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('分割线'),
elevation: 0.0,
centerTitle: true,
),
body: Column(
children: [
Text("分割线"),
Divider(),
Divider(
thickness: 10, //设置分割线高度
indent: 20, //起点缩进距离
endIndent: 40, //终点缩进距离
color: Colors.red, //是指分割线颜色
),
],
),
);
}
}
二、垂直分割线:VerticalDivider
import 'package:flutter/material.dart';
class DividerWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('分割线'),
elevation: 0.0,
centerTitle: true,
),
body: Row(
children: [
Text("分割线"),
VerticalDivider(),
Text("分割线"),
VerticalDivider(
thickness: 10, //设置分割线高度
indent: 20, //起点缩进距离
endIndent: 40, //终点缩进距离
color: Colors.red, //是指分割线颜色
),
],
),
);
}
}