Flutter学习笔记-Flex弹性布局主轴方向上的布局顺序

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget
{
    Widget build(BuildContext context)
    {
        const bgColor = const[Colors.red, Colors.green, Colors.blue];

        return MaterialApp
        (
            title: "flutter Demo",
            theme: ThemeData
            (
                primarySwatch: Colors.deepOrange,
            ),

            home: Scaffold
            (
                appBar: AppBar
                (
                    title: Text("这是APP的标题"),
                ),

                body: Container
                (
                    // Container背景颜色
                    color: Colors.black,

                    // 占满全屏
                    constraints: BoxConstraints.expand(),

                    child: Flex
                    (
                        // 水平方向
                        direction: Axis.horizontal,

                        // 主轴对其方式
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,

                        // 右到左顺序
                        textDirection: TextDirection.rtl,

                        // 交叉轴对其方式
                        // crossAxisAlignment: CrossAxisAlignment.stretch,

                        children: List<Widget>.generate(3, (i)
                        {
                            return Container
                            (
                                width: 100,
                                height: 100,
                                color: bgColor[i], 

                                // 编号(上面textDirection: TextDirection.rtl, 所以顺序是: 2, 1, 0)
                                child: Text("$i", style: TextStyle(color: Colors.white, fontSize: 18)),
                            );
                        }),
                    )
                ),
            ),
        );
    }
}