flutter- Row Column Expanded ListView

Row

继承

Object-> Diagnosticable ->DiagnosticableTree-> Widget ->RenderObjectWidget ->MultiChildRenderObjectWidget-> Flex-> Row

介绍

一个小部件，用于在水平数组中显示其子项。要使子项扩展以填充可用的水平空间，请将子项包装在Expanded小部件中。“ 行”窗口小部件不会滚动（并且通常将行中的子项多于可用空间中的子项被视为错误）。如果您有一系列小部件并希望它们能够在没有足够空间时滚动，请考虑使用ListView。有关垂直变体，请参见列。如果您只有一个孩子，请考虑使用Align或Center来定位孩子。

Code

此示例将可用空间划分为三个（水平），并将文本放在前两个单元格中心，将Flutter徽标放在第三个中心：

Row(
  children: <Widget>[
    Expanded(
      child: Text('Deliver features faster', textAlign: TextAlign.center),
    ),
    Expanded(
      child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
    ),
    Expanded(
      child: FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: const FlutterLogo(),
      ),
    ),
  ],
)

构造方法

  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

子控件主轴放置方式

enum MainAxisAlignment {
  start,  // 尽可能靠近主轴的起点
   end, // 尽可能靠近主轴末端的地方
  center, // 尽可能近主轴中间的地方
  spaceBetween, // 在子控件中间均匀地放置自由空间，第一个前和最后一个后无空间
  spaceAround,  // 在子控件中间均匀地放置自由空间，同时也放置一半空间在第一个前和最后一个控件后。
  spaceEvenly,  // 在第一个控件和最后一个控件之前和之后均匀地放置自由空间
}

MainAxisSize

 enum MainAxisSize {
  min, // 控件尽可能小（取此值时，上面的MainAxisAlignment 无效）
  max, //  控件尽可能大
}

CrossAxisAlignment

侧轴方向的放置方式

enum CrossAxisAlignment {
  start,  // 子控件都父控件的项部
  end, // 子控件都在父控件的底部
  center, // 子控件居父控件的中部
  stretch, // 子控件填满主轴，（ 使用此值时，子控件一定要设置width或height）
  baseline, // 当子控件是Text时有效，并要设置下面的TextBaseLine属性
}

黄色和黑色警告条纹

解决方法是将子项包装在Expanded小部件中，该小部件告诉行应该为子项提供剩余空间：

Column

Flexible

this.fit = FlexFit.loose

Expanded 继承与Flexible

会尽可能的充满分布在Row, Column, or Flex的主轴方向上；或者会按照flex等比例平分剩余空间
强制子组件填充可用空间
this.fit = FlexFit.tight

FlexFit

tight(紧) 子元素被要求填补可用的空间。
loose（宽松） 子元素最多可以与可用的空间一样大(但允许更小)。

ListView

可滚动的widget 相当于andorid中的 scrollview和listview合体

参考

• 官网
• 陈英有