zoukankan      html  css  js  c++  java
  • Flutter 容器类组件(Padding, Container, ConstrainedBox)的介绍和用法

    容器组件用法如下:

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

       运行图忽略了(见外)

    最后, 大家还是要多加练习,勤写代码,熟能生巧,必成大器!!!

     
     
     
     
  • 相关阅读:
    SQL优化总结之一
    web前端扩展性知识点
    canvas
    开动大脑js小案例(有空就更新的那种)
    本博客在手,jQuery无敌
    小程序整理(持续更新)
    样式初始化代码
    ajax中的async
    跨域问题解决
    ES6学习笔记(持续更新中)
  • 原文地址:https://www.cnblogs.com/maqingyuan/p/13537800.html
Copyright © 2011-2022 走看看