美文网首页
flutter控件之Column

flutter控件之Column

作者: Mr丶xi先森 | 来源:发表于2018-09-11 16:04 被阅读265次

import 'package:flutter/material.dart';
class LearnColumn extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return new _LearnColumn();
  }
}
class _LearnColumn extends State<LearnColumn>{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        mainAxisAlignment: MainAxisAlignment.center,//控制内容显示位置,类似于layout_gravity  MainAxisAlignment.start显示于主轴起点的位置因为有的国家内容是从右往左边读的,所以这里只区分起点和终点
                                                                                                                                                                                  // end将多个小部件放置于主轴结束的位置
                                                                                                                                                                                  //center将多个小部件放置于主轴的中间
                                                                                                                                                                                  //spaceBetween将多个小部件均匀的分布在空闲的主轴控件中
                                                                                                                                                                                  // spaceAround 可以在小部件的之前之后之间均匀分割空闲的一半空间
                                                                                                                                                                                  // spaceEvenly 可以在小部件的之前之后之间均匀的分割空闲的空间
        crossAxisAlignment: CrossAxisAlignment.stretch,//要求内部的小部件填充满横轴
        //在Row中mainAxisAlignment控制水平方向对齐,crossAxisAlignment控制垂直方向对齐,而在Column中则正好相反
        mainAxisSize: MainAxisSize.max,//设置主轴方向所占的宽度和高度
        children: <Widget>[
          new Container(
            width: 200.0,
            height: 150.0,
            decoration: new BoxDecoration(
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

相关文章

网友评论

      本文标题:flutter控件之Column

      本文链接:https://www.haomeiwen.com/subject/vppugftx.html