介绍

「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'),)