Flutter入门（45）：Flutter 组件之 Divider 详解

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 是最简单的一个组件之一了，稍微熟悉一下就掌握啦。