Flutter 容器類元件(Padding, Container, ConstrainedBox)的介紹和用法
阿新 • • 發佈:2020-08-20
容器元件用法如下:
Padding
含義: Padding用來為子元素新增填充,也就是指定子元素與容器邊界的距離,作用基本上與Android中ViewGroup的padding屬性相同。
const Padding({
Key key,
@required this.padding,
Widget child
})
我們一般使用EdgeInsets類,它是EdgeInsetsGeometry的一個子類,定義了一些設定填充的便捷方法。
EdgeInsets
我們看看EdgeInsets提供的便捷方法:
- fromLTRB(double left, double top, double right, double bottom):分別指定四個方向的填充。
- all(double value) : 所有方向均使用相同數值的填充。
- only({left, top, right ,bottom }):可以設定具體某個方向的填充(可以同時指定多個方向)。
- symmetric({ vertical, horizontal }):用於設定對稱方向的填充,vertical指top和bottom,horizontal指left和right。
-
EdgeInsets.all(四個相同的方向)
body: Padding( padding: EdgeInsets.all(16), child: Container( color: Colors.blue ) )
執行效果:
-
EdgeInsets.symmetric(上下或左右)
body: Padding(
padding: EdgeInsets.symmetric(vertical: 50)
child: Container(
color: Colors.blue,
)
)
執行效果:
-
EdgeInsets.fromLTRB
body: Padding( padding: EdgeInsets.fromLTRB(16, 32, 48, 64), child: Container( color: Colors.blue, )),
執行圖忽略了(見外)
-
EdgeInsets.only
body: Padding(
padding: EdgeInsets.only(left: 16, bottom: 32),
child: Container(
color: Colors.blue,
)),
執行圖忽略了(見外)
最後, 大家還是要多加練習,勤寫程式碼,熟能生巧,必成大器!!!