LinerLayout在flutter體現

android                                                                    flutter

LinearLayout         ---------------------------           Row/Column

android 原生LinerLayout 垂直、水平 及 權重

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ff0000"/>
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#00ff00"/>
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#00ffff"/>
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#ffffff"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">
        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#ff0000"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#00ff00"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#00ffff"/>
    </LinearLayout>
</LinearLayout>

flutter實現

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle =
        SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  color: Color(0xffff0000),
                ),
                flex: 1,
              ),
              Expanded(
                child: Container(
                  color: Color(0xff00ff00),
                ),
                flex: 1,
              ),
              Expanded(
                child: Container(
                  color: Color(0xff00ffff),
                ),
                flex: 1,
              ),
            ],
          ),
          flex: 1,
        ),
        Container(
          color: Color(0xffffffff),
          height: 10,
        ),
        Expanded(
          child: Column(
            children: <Widget>[
              Expanded(
                child: Container(
                  color: Color(0xffff0000),
                ),
                flex: 1,
              ),
              Expanded(
                child: Container(
                  color: Color(0xff00ff00),
                ),
                flex: 1,
              ),
              Expanded(
                child: Container(
                  color: Color(0xff00ffff),
                ),
                flex: 1,
              ),
            ],
          ),
          flex: 1,
        ),
      ],
    );
  }
}

效果

總結 控件按比例平分 使用Expanded控件包括 通過flex設置比例參數

LinerLayout 對齊方式

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffff00">
    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#ff0000"/>
    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#000000"/>
</LinearLayout>

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xffffff00),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            color: Color(0xffff0000),
            width: 50.0,
            height: 50.0,
          ),
          Container(
            color: Color(0xff000000),
            width: 50.0,
            height: 50.0,
          ),
        ],
      ),
    );
  }
}

總結：flutter mainAxisAlignment 主軸方向指的是控件的方向 如果控件是Colum  主軸方向是垂直方向  如果控件Row 主軸方向水平方向  crossAxisAlignment 交叉軸與主軸相反   Colum交叉軸方向 水平方向  Row交叉軸方向 垂直方向