首页 文章详情

Element 系列组件之 EBorder 虚线边框

老孟Flutter | 1066 2021-12-11 01:32 0 0 0
UniSMS (合一短信)

介绍

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

引入

  1. 「pubspec.yaml」 中依赖

    element_ui: ^0.0.1
  2. 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'),
)


你可能还喜欢

关注「老孟Flutter」
让你每天进步一点点
good-icon 0
favorite-icon 0
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter