1. 基本介绍
Divider 是 flutter 提供的一个非常简单的分割线组件。
2. 示例代码
代码下载地址。如果对你有帮助的话记得给个关注,代码会根据我的 Flutter 专题不断更新。
3. 属性介绍
Divider 属性 | 介绍 |
---|---|
height | Divider 组件高度 |
thickness | 分割线线宽,分割线居于 Divider 中心 |
indent | 分割线左侧间距 |
endIndent | 分割线右侧间距 |
color | 分割线颜色 |
4. Divider 详解
import 'package:flutter/material.dart';
class FMDividerVC extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("Divider"),),
body: _listView(),
);
}
ListView _listView(){
return ListView(
children: [
Container(
height: 50,
color: Colors.yellow,
child: Text("高度为 30,线宽为 5 的分割线"),
),
Divider(
height: 50, // Divider 组件高度
thickness: 5, // 分割线线宽,分割线居于 Divider 中心
indent: 20, // 分割线左侧间距
endIndent: 15, // 分割线右侧间距
color: Colors.red, // 分割线颜色
),
Container(
height: 50,
color: Colors.yellow,
child: Text("高度为 0,线宽为 5 的分割线"),
),
Divider(
height: 0, // Divider 组件高度
thickness: 5, // 分割线线宽,分割线居于 Divider 中心
indent: 20, // 分割线左侧间距
endIndent: 15, // 分割线右侧间距
color: Colors.red, // 分割线颜色
),
],
);
}
}
Divider.png
5. 技术小结
Divider 是最简单的一个组件之一了,稍微熟悉一下就掌握啦。