Flutter 基础布局 Row Widget

Row Widget类似于Andorid中的LinearLayout控件，水平方向。

Row Widget

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

class RowExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return RowExampleState();
  }
}

class RowExampleState extends State<RowExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Row Widget"),
        primary: true,
      ),
      body: Row(
        verticalDirection: VerticalDirection.up,
        textBaseline: TextBaseline.ideographic,
        children: <Widget>[
          Container(
            child: Text("A"),
            width: 50,
            height: MediaQuery.of(context).size.width,
            color: Colors.amber,
          ),
          Container(
            child: Text("B"),
            width: 50,
            height: MediaQuery.of(context).size.width,
            color: Colors.blueAccent,
          ),
          Container(
            child: Text("C"),
            width: 50,
            height: MediaQuery.of(context).size.width,
            color: Colors.cyanAccent,
          ),
          Container(
            child: Text("D"),
            width: 50,
            height: MediaQuery.of(context).size.width,
            color: Colors.deepOrange,
          ),
          Container(
            child: Text("E"),
            width: 50,
            height: MediaQuery.of(context).size.width,
            color: Colors.lightBlue,
          ),
          Container(
            child: Text("F"),
            width: 50,
            height: MediaQuery.of(context).size.width,
            color: Colors.indigo,
          ),
          Container(
            child: Text("G"),
            width: 50,
            height: MediaQuery.of(context).size.width,
            color: Colors.green,
          ),
          Container(
            child: Text("H"),
            width: 50,
            height: MediaQuery.of(context).size.width,
            color: Colors.lightGreen,
          )
        ],
      ),
    );
  }
}