flutter Row布局详解

Row布局:

  1. 水平对齐方式
  2. 横轴对齐方式
    在这里插入图片描述
child: Row(
 //水平对齐
 mainAxisAlignment: MainAxisAlignment.center,  //水平居中对齐
 //mainAxisAlignment: MainAxisAlignment.start,  //水平居左对齐(默认)
 //mainAxisAlignment: MainAxisAlignment.end,  //水平居右对齐
 //mainAxisAlignment: MainAxisAlignment.spaceBetween,  //水平间距对齐
 //mainAxisAlignment: MainAxisAlignment.spaceEvenly,  //水平均匀对齐
 //mainAxisAlignment: MainAxisAlignment.spaceAround,  //水平间距为两边2倍对齐

 //横轴对齐
 crossAxisAlignment: CrossAxisAlignment.center, //横轴居中对齐(默认)
 // crossAxisAlignment: CrossAxisAlignment.stretch, //横轴展开最大高度对齐
 // crossAxisAlignment: CrossAxisAlignment.start, //横轴居顶对齐
 //crossAxisAlignment: CrossAxisAlignment.end, //横轴居顶对齐

 //textDirection: TextDirection.rtl, //右到左排版
 //mainAxisSize: MainAxisSize.max, //水平轴宽度大小
 //verticalDirection: VerticalDirection.down, //垂直对齐 (up上,down下)
 children: <Widget>[
   Container(
     width: 110,
     height: 60,
     color: Colors.pink,
     child: Text('aaa'),
   ),
   Container(
     width: 110,
     height: 80,
     color: Colors.yellow,
     child: Text('bbb'),
   ),
   Container(
     width: 110,
     height: 60,
     color: Colors.blue,
     child: Text('ccc'),
   ),
 ]
),

1. 水平对齐方式:

在这里插入图片描述

mainAxisAlignment: MainAxisAlignment.spaceBetween,  //水平间距对齐

在这里插入图片描述

mainAxisAlignment: MainAxisAlignment.spaceEvenly,  //水平均匀对齐

在这里插入图片描述

mainAxisAlignment: MainAxisAlignment.spaceAround,  //水平间距为两边2倍对齐

2. 横轴对齐方式:

在这里插入图片描述

crossAxisAlignment: CrossAxisAlignment.center, //横轴居中对齐(默认)

在这里插入图片描述

crossAxisAlignment: CrossAxisAlignment.start, //横轴居顶对齐

在这里插入图片描述

crossAxisAlignment: CrossAxisAlignment.end, //横轴居顶对齐

代码如下:

main.dart:

//引入flutter的dart库
import 'package:flutter/material.dart';
//启动函数
void main() => runApp(MyApp());

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //MaterialApp 是flutter的页面根组件
    return MaterialApp(
      title: 'main根页面',
      debugShowCheckedModeBanner: false,  //清除debug
      //home表示页面信息
      home: LayoutWidget()
    );
  }
}

//row布局
class LayoutWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('排版'),
      ),
      body: Container(
        child: Container(
          width: 400,
          height: 150,
          color: Colors.grey,
          alignment: Alignment.center, //垂直对齐方式
          child: Row(
            //水平对齐
            mainAxisAlignment: MainAxisAlignment.center,  //水平居中对齐
 			//mainAxisAlignment: MainAxisAlignment.start,  //水平居左对齐(默认)
 			//mainAxisAlignment: MainAxisAlignment.end,  //水平居右对齐
            //mainAxisAlignment: MainAxisAlignment.spaceBetween,  //水平间距对齐
            //mainAxisAlignment: MainAxisAlignment.spaceEvenly,  //水平均匀对齐
            //mainAxisAlignment: MainAxisAlignment.spaceAround,  //水平间距为两边2倍对齐

            //横轴对齐
            crossAxisAlignment: CrossAxisAlignment.center, //横轴居中对齐(默认)
            // crossAxisAlignment: CrossAxisAlignment.stretch, //横轴展开最大高度对齐
            // crossAxisAlignment: CrossAxisAlignment.start, //横轴居顶对齐
            //crossAxisAlignment: CrossAxisAlignment.end, //横轴居顶对齐

            //textDirection: TextDirection.rtl, //右到左排版
            //mainAxisSize: MainAxisSize.max, //水平轴宽度大小
            //verticalDirection: VerticalDirection.down, //垂直对齐 (up上,down下)
            children: <Widget>[
              Container(
                width: 110,
                height: 60,
                color: Colors.pink,
                child: Text('aaa'),
              ),
              Container(
                width: 110,
                height: 80,
                color: Colors.yellow,
                child: Text('bbb'),
              ),
              Container(
                width: 110,
                height: 60,
                color: Colors.blue,
                child: Text('ccc'),
              ),
            ]
          ),
        )
      ),
    );
  }
}

扩展
Column布局基本同理:
在这里插入图片描述

child: Column(
 mainAxisAlignment: MainAxisAlignment.spaceAround, //垂直间隙对齐
 crossAxisAlignment: CrossAxisAlignment.center, //居左对齐(默认)
 // crossAxisAlignment: CrossAxisAlignment.start, //居左对齐
 // crossAxisAlignment: CrossAxisAlignment.end, //居右对齐

 children: <Widget>[
	//这里面是子元素(同上)
 ]
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值