Element 系列組件之 EBorder 虛線邊框

介紹

「EBorder」 組件是 「Flutter Element」 組件系列中的 邊框組件，通過「虛/實線」繪制。

引入

1. 在 「pubspec.yaml」 中依賴

   element_ui:?^0.0.1
   

2. import

   import?'package:element_ui/widgets.dart';
   

基礎(chǔ)用法

基礎(chǔ)用法：

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

默認(rèn)情況下 「EBorder」 充滿父組件。

「mainAxisSize」：組件尺寸，默認(rèn)盡可能大，設(shè)置為 「MainAxisSize.min」 時，表示盡可能小。

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

內(nèi)部默認(rèn)設(shè)置了 「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」 ：邊框類型，默認(rèn)實線。

• 「solid」：實線
• 「dashed」：虛線

設(shè)置虛線：

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

「shape」：邊框形狀，默認(rèn)圓角邊框。

• 「circle」：圓形
• 「rect」：矩形
• 「rrect」：圓角矩形
• 「round」：圓角 類似足球場形狀

設(shè)置圓形：

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

設(shè)置形狀為「round」：

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

「style」：邊框的樣式。

• 「color」：邊框顏色。
• 「strokeWidth」：線寬。
• 「dashGap」：虛線空白處寬。
• 「dashWidth」：虛線寬。
• 「padding」 ：內(nèi)邊距。
• 「radius」：圓角。

設(shè)置顏色：

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

設(shè)置線寬：

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

設(shè)置 「dashGap」 和 「dashWidth」：

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