Flutter之Align,Padding,Center,Baseline组件

/**
    const Align({
    Key key,
    this.alignment = Alignment.center,//对齐方式,系统预设了9种对齐方式,也可以自定义Alignment(0.4,0.5),
    其中第一个参数,-1.0是左边对齐,1.0是右边对齐,第二个参数,-1.0是顶部对齐,1.0是底部对齐。
    this.widthFactor,//宽是子组件的倍数,Align的宽度就是child的宽度乘以这个值
    this.heightFactor,//高是子组件的倍数,Align的高度就是child的高度乘以这个值
    Widget child
    })
 */
body:ListView(
          children: <Widget>[
            Container(
              color: Color(0xfff1f1f1),
              child: Align(
                alignment: Alignment.bottomLeft,
                widthFactor: 3,
                heightFactor: 2,
                child: Text("Alignment.bottomLeft"),
              ),
            ),
            Container(
              color: Color(0xfff1f1f1),
              margin: EdgeInsets.only(top: 10.0),
              child: Align(
                alignment: Alignment(0.4, 0.5),
                widthFactor: 3,
                heightFactor: 2,
                child: Text("Alignment(0.4, 0.5)"),
              ),
            ),

          ],
)
/**
    const Padding({
    Key key,
    @required this.padding,//padding值
    Widget child,
    })
 */
//padding内部的Container大小失效,Padding相当于是父容器的内边距
body: Container(
          width: 200,
          height: 150,
          color: Colors.green,
          child: Padding(
            padding: EdgeInsets.only(top: 10, left: 5,right: 15,bottom: 20),
            child: Container(
              width: 50,
              height: 50,
              color: Colors.red,
              child: Text("padding"),
            ),
          ),
        ),
/**
    Center继承自Align,只是将alignment设置为Alignment.center
    class Center extends Align {
    /// Creates a widget that centers its child.
    const Center({ Key key, 
double widthFactor, //子控件width的倍数
double heightFactor, 
Widget child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
    }
 */
 body: Container(
          color: Colors.green,
          child: Center(
            child: Container(
              width: 50,
              height: 50,
              child: Text("center"),
            ),
            widthFactor: 5,
            heightFactor: 2,
          ),
        ),
/**
    const Baseline({
    Key key,
    @required this.baseline,  baseline数值,必须要有,从顶部算
    @required this.baselineType,  alphabetic:对齐字符底部的水平线;  ideographic:对齐表意字符的水平线。
    Widget child
    })
 */
body: Row(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 5.0),
              child: Baseline(
                baseline: 40.0,
                baselineType: TextBaseline.alphabetic,
                child: Text("文本",),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 5.0),
              child: Baseline(
                baseline: 40.0,
                baselineType: TextBaseline.alphabetic,
                child: Text("ajfajf",),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 5.0),
              child: Baseline(
                baseline: 40.0,
                baselineType: TextBaseline.ideographic,
                child: Text("文本",),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 5.0),
              child: Baseline(
                baseline: 40.0,
                baselineType: TextBaseline.ideographic,
                child: Text("ajfajf",),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 5.0),
              child: Baseline(
                baseline: 10.0,
                baselineType: TextBaseline.ideographic,
                child: Text("ajfajf",),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 5.0),
              child: Baseline(
                baseline: 10.0,
                baselineType: TextBaseline.ideographic,
                child: Container(
                  color: Color(0xfff1f1f1),
                  child: Baseline(
                    baseline: 5.0,
                    baselineType: TextBaseline.ideographic,
                    child: Text("ajfajf",),
                  ),
                )
              ),
              ),
          ],
        )

码云地址:https://gitee.com/xgljh/Flutter.git

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容