Divider分割线

当两个小组件彼此之间需要一些空间时，在它们之间绘制一条线会很有帮助,跟我一起尝试下吧，先来看看它的属性

Divider({
    Key key,
    this.height,
    this.thickness,
    this.indent,
    this.endIndent,
    this.color,
  }) 

• key 组件的标识符
• height 分割线的高度
• thickness 绘制的线条的粗细
• indent 向前的间隔
• endIndent 向后的间隔
• color 分割线的颜色

让我们来简单的使用一下

class DividerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Divider展示'),
        centerTitle: true,
      ),
      body: Center(
        child: SizedBox(
          width: 200,
          child: Column(
            children: <Widget>[
              Spacer(),
              Container(
                height: 200,
                width: 200,
                color: Colors.blue,
              ),
              const Divider(
                thickness: 5,
                color: Colors.redAccent,
              ),
              const Divider(
                thickness: 5,
                color: Colors.green,
              ),
              const Divider(
                thickness: 5,
                color: Colors.orange,
              ),
              Container(
                height: 200,
                width: 200,
                color: Colors.red,
              ),
              Spacer(),
            ],
          ),
        ),
      ),
    );
  }
}

• 效果如何：

  
  1586248693888.jpg
• 除了这样我们还可以配置全局的玩法-MaterialApp

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.orange,
        dividerTheme: DividerThemeData(
            color: Colors.orange,
            space: 10,
            thickness: 5,
            indent: 20,
            endIndent: 20),
      ),
      home: DividerWidget(),
    );
  }
}

注意此时的高度变成了space，然后将上面的Divider的属性设置去掉直接写成const Divider()效果如下：

全局效果.jpg