Flutter Row 水平布局组件

Row 是水平摆放的控件

Row的属性

属性名	功能
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素
MainAxisSize	在主轴方向占有空间的值，默认是max 根据传入的布局约束条件，最大化主轴方向的可用空间与max相反，是最小化主轴方向的可用空间
VerticalDirection	定义了children摆放顺序，默认是down。down：从top到bottom进行布局up：从bottom到top进行布局。

MainAxisAlignment的属性

属性名	功能
center	将children放置在主轴的中心
end	将children放置在主轴的末尾
spaceAround	将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2
spaceBetween	将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙
spaceEvenly	将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child
start	将children放置在主轴的起点

CrossAxisAlignment 的属性

属性名	功能
baseline	在交叉轴方向，使得children的baseline对齐
center	children在交叉轴上居中展示

/*
 *ROW 水平布局组件 
 */

class RowView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black26,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          IconContainer(Icons.home, color: Colors.red),
          IconContainer(Icons.search, color: Colors.blue),
          IconContainer(Icons.send, color: Colors.orange),
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  double size;
  IconData icon;
  Color color;

  IconContainer(this.icon, {this.size, this.color = Colors.blue}) {
    this.size = 32.0;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: this.size + 60,
      height: this.size + 60,
      color: this.color,
      child: Center(
        child: Icon(
          this.icon,
          color: Colors.white,
          size: this.size,
        ),
      ),
    );
  }
}

效果

image.png

Column 组件垂直布局


/*
 *column 垂直布局组件 
 */
class ColumnView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 800,
      width: 500,
      color: Colors.black26,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          IconContainer(Icons.home, color: Colors.red),
          IconContainer(Icons.search, color: Colors.blue),
          IconContainer(Icons.send, color: Colors.orange),
        ],
      ),
    );
  }
}

image.png

Expanded 组件比例组件

/*
* Expanded 可以用在 column  跟Row 布局中,   主要是类型一种比例分配的作用
* 
*/

class ExpandedDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Padding(
    padding: EdgeInsets.all(10),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded(
          flex: 1,
          child: IconContainer(Icons.hdr_off),
        ),
        SizedBox(
          width: 10.0,
        ),
        Expanded(
          flex: 3,
          child: IconContainer(Icons.account_box),
        )
      ],
    ),
  );
}
}

image.png


class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.all(10),
          child: Image.network('https://www.itying.com/images/flutter/4.png',
              fit: BoxFit.cover),
        ),
        Padding(
          padding: EdgeInsets.all(10),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                flex: 1,
                child: IconContainer(Icons.hdr_off),
              ),
              SizedBox(
                width: 10.0,
              ),
              Expanded(
                flex: 3,
                child: IconContainer(Icons.account_box),
              )
            ],
          ),
        )
      ],
    );
  }
}

image.png

Flutter Row 水平布局组件

Column 组件 垂直布局

Expanded 组件 比例组件

你可能感兴趣的:(Flutter Row 水平布局组件)

Column 组件垂直布局

Expanded 组件比例组件