美文网首页Flutter 实战
Flutter入门(45):Flutter 组件之 Divide

Flutter入门(45):Flutter 组件之 Divide

作者: Maojunhao | 来源:发表于2020-10-21 09:21 被阅读0次

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

相关文章

网友评论

    本文标题:Flutter入门(45):Flutter 组件之 Divide

    本文链接:https://www.haomeiwen.com/subject/iuflmktx.html