Column & Row & Wrap流式布局

[gaowei1012]

在使用Row布局时会出现，内容过长溢出报错，进而使用Wrap布局

/// Row 属性
Row({ 
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
})

/// Wrap 属性
Wrap({
this.direction = Axis.horizontal, 
  this.alignment = WrapAlignment.start, // 沿主轴对齐
  this.spacing = 0.0, // 水平之间间距
  this.runAlignment = WrapAlignment.start,
  this.runSpacing = 0.0,  // 垂直之间间距
  this.crossAxisAlignment = WrapCrossAlignment.start,
  this.textDirection, // 文字描述
  this.verticalDirection = VerticalDirection.down,
  List<Widget> children = const <Widget>[], /// Widget 
})

[gaowei1012]

Wrap 使用实例

Wrap(
            /// 流式布局
            spacing: 8.0,

            /// 水平
            runSpacing: 8.0,

            /// 垂直
            alignment: WrapAlignment.spaceAround,
            children: [
              RaisedButton(
                  onPressed: _handleClick,
                  child: Text('Container'),
                  textColor: Colors.black),
              RaisedButton(
                onPressed: _goToScaffold,
                child: Text('Scaffold & TabBar'),
              ),
              RaisedButton(
                onPressed: _goToScaffold,
                child: Text('Scaffold & TabBar'),
              ),
              RaisedButton(
                onPressed: _goToScaffold,
                child: Text('Scaffold & TabBar'),
              )
            ],
          )

[gaowei1012]

Column 属性

Column({
    children: children,
    key: key,
    direction: Axis.vertical,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
})