Flutter 容器類組件(Padding, Container, ConstrainedBox)的介紹和用法

容器組件用法以下:ui

Padding

含義: Padding用來爲子元素添加填充,也就是指定子元素與容器邊界的距離,做用基本上與Android中ViewGroup的padding屬性相同。this

const Padding({
   Key key,
   @required this.padding,
   Widget child 
})

咱們通常使用EdgeInsets類,它是EdgeInsetsGeometry的一個子類,定義了一些設置填充的便捷方法。spa

EdgeInsets

咱們看看EdgeInsets提供的便捷方法:code

  • 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   
  )
)

運行效果:blog

  • EdgeInsets.symmetric(上下或左右)

body: Padding(
  padding: EdgeInsets.symmetric(vertical: 50)
  child: Container(
    color: Colors.blue,
  )
)

運行效果:get

 

  • EdgeInsets.fromLTRB

body: Padding(
    padding: EdgeInsets.fromLTRB(16, 32, 48, 64),
    child: Container(
      color: Colors.blue,
)),

    運行圖忽略了(見外)class

  • EdgeInsets.only

body: Padding(
    padding: EdgeInsets.only(left: 16, bottom: 32),
    child: Container(
      color: Colors.blue,
)),

   運行圖忽略了(見外)容器

 

最後, 你們仍是要多加練習,勤寫代碼,熟能生巧,必成大器!!!require

相關文章
相關標籤/搜索