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,
)
],
),
);
}
}