Element 系列组件之 EBorder 虚线边框

老孟Flutter

发布于 2021-12-09 21:50:58

2.6K0

发布于 2021-12-09 21:50:58

文章被收录于专栏：FlutterFlutter

介绍

「EBorder」 组件是 「Flutter Element」 组件系列中的边框组件，通过「虚/实线」绘制。

引入

在 「pubspec.yaml」 中依赖

element_ui: ^0.0.1

import

import 'package:element_ui/widgets.dart';

基础用法

基础用法：

EBorder(
  child: Text('data'),
)

默认情况下 「EBorder」 充满父组件。

「mainAxisSize」：组件尺寸，默认尽可能大，设置为 「MainAxisSize.min」 时，表示尽可能小。

EBorder(
  mainAxisSize: MainAxisSize.min,
  child: Text('data'),
)

内部默认设置了 「padding」，值为 「EdgeInsets.symmetric(vertical: 6.0, horizontal: 12)」。

修改其 「padding」：

EBorder(
  mainAxisSize: MainAxisSize.min,
  style: EBorderStyle(
      padding: EdgeInsets.symmetric(vertical: 20, horizontal: 30)),
  child: Text('data'),
)

「type」 ：边框类型，默认实线。

「solid」：实线
「dashed」：虚线

设置虚线：

EBorder(
  type: BorderType.dashed,
  child: Text('data1'),
)

「shape」：边框形状，默认圆角边框。

「circle」：圆形
「rect」：矩形
「rrect」：圆角矩形
「round」：圆角类似足球场形状

设置圆形：

Container(
              height: 40,
              width: 100,
              child: const EBorder(
                type: BorderType.dashed,
                shape: BorderShape.circle,
                child: Text('data2'),
              ),
            )

设置形状为「round」：

EBorder(
  type: BorderType.dashed,
  shape: BorderShape.round,
  child: Text('data'),
)

「style」：边框的样式。

「color」：边框颜色。
「strokeWidth」：线宽。
「dashGap」：虚线空白处宽。
「dashWidth」：虚线宽。
「padding」 ：内边距。
「radius」：圆角。

设置颜色：

EBorder(
  type: BorderType.dashed,
  shape: BorderShape.rrect,
  style: EBorderStyle(color: Colors.red),
  child: Text('data'),
)

设置线宽：

EBorder(
  type: BorderType.dashed,
  shape: BorderShape.rrect,
  style: EBorderStyle(
    color: Colors.red,
    strokeWidth: 3,
  ),
  child: Text('data'),
)

设置 「dashGap」 和 「dashWidth」：

EBorder(
  type: BorderType.dashed,
  shape: BorderShape.rrect,
  style: EBorderStyle(
    color: Colors.red,
    dashGap: 5,
    dashWidth: 5,
  ),
  child: Text('data'),
)