Flutter学习：基础组件（二）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34447328/article/details/85690054

1.Row

行：在水平方向显示子控件，但是不能滚动。
（注意：行的子控件一般包裹在 Expanded或Flexible小部件中，不然，行溢出时，在行末尾有黄黑色警告条纹。如下图）


关于Row的构造器：

 Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
}

参数名	参数解释
MainAxisAlignment	主轴方向的对齐方式（对于Row来说，主轴是横轴）
MainAxisSize	在主轴方向占有空间的值
crossAxisAlignment	在交叉轴的对齐方式
TextDirection	绘制方向，从左向右还是从右向左
VerticalDirection	children绘制顺序，从上向下，或者从下向上
TextBaseline	基线，根据那个基线对齐
children	添加的子控件

2.Column:

构造器：

Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.vertical,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
}

和行的参数一样，只不过主轴的对齐方式参考不一样，对于Row主轴为横轴，而Column为纵轴。

3.Stack

取代线性布局，Stack允许子 widget 堆叠， 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位布局模型设计的。

 Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,
    List<Widget> children = const <Widget>[],
  }) : super(key: key, children: children);

alignment：对齐方式，默认是左上角。

4.Container

容器组件，可以设置边距，填充，大小等限制。

Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  }) : assert(margin == null || margin.isNonNegative),
       assert(padding == null || padding.isNonNegative),
       assert(decoration == null || decoration.debugAssertIsValid()),
       assert(constraints == null || constraints.debugAssertIsValid()),
       assert(color == null || decoration == null,
         'Cannot provide both a color and a decoration\n'
         'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'
       ),
       decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null),
       constraints =
        (width != null || height != null)
          ? constraints?.tighten(width: width, height: height)
            ?? BoxConstraints.tightFor(width: width, height: height)
          : constraints,
       super(key: key);

参数	参数解释
alignment	对齐方式
padding	内边距值
color	填充颜色
decoration	设置边框、背景色、背景图片、圆角等属性
foregroundDecoration	前景装饰
width	容器宽
height	容器高
constraints	对容器进行装饰
margin	容器外边距
transform	矩阵变换
child	子控件

class TestContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      padding: EdgeInsets.all(30),
//      color: Colors.green,
      alignment: Alignment(0.1, 0.0),
      width: 250,
      height: 500,
      margin: EdgeInsets.all(20),
      transform: Matrix4.rotationZ(-0.1),
      constraints: BoxConstraints.expand(height: 250.0, width: 500.0),
      foregroundDecoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(
                'http://file06.16sucai.com/2016/0829/37c41d6c1e7af2ece2b3936c0aab86da.jpg'),
          )
      ),
      decoration: new BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(10)
      ),
      child: Text(
        "hello world",
        style: TextStyle(
            fontSize: 50
        ),
      ),
    );
  }
}

运行结果如下：