Flutter:分割线组件Divider和VerticalDiVider

xiaohai 2021-08-16 08:18:41 6689人围观 标签: Flutter 
简介分割线是也是比较常用的组件,本文主要介绍下Divider和VerticalDiVider的使用方法。

分割线的属性说明:

  1. indent: 起点缩进距离
  2. endIndent: 终点缩进距离
  3. color: 分割线颜色
  4. height: 分割线区域的高度,并非分割线的高度
  5. 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, //是指分割线颜色
          ),
        ],
      ),
    );
  }
}

图片alt

二、垂直分割线: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, //是指分割线颜色
          ),
        ],
      ),
    );
  }
}