Flutter 基础布局 Column Widget
Column Widget类似于Andorid中的LinearLayout控件,垂直方向。
Column Widget
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ColumnExample extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return ColumnExampleState();
}
}
class ColumnExampleState extends State<ColumnExample> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Column Widget"),
primary: true,
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: Text("A"),
height: 50,
width: MediaQuery.of(context).size.width,
color: Colors.amber,
),
Container(
child: Text("B"),
height: 50,
width: MediaQuery.of(context).size.width,
color: Colors.blueAccent,
),
Container(
child: Text("C"),
height: 50,
width: MediaQuery.of(context).size.width,
color: Colors.cyanAccent,
),
Container(
child: Text("D"),
height: 50,
width: MediaQuery.of(context).size.width,
color: Colors.deepOrange,
),
Container(
child: Text("E"),
height: 50,
width: MediaQuery.of(context).size.width,
color: Colors.lightBlue,
),
Container(
child: Text("F"),
height: 50,
width: MediaQuery.of(context).size.width,
color: Colors.indigo,
),
Container(
child: Text("G"),
height: 50,
width: MediaQuery.of(context).size.width,
color: Colors.green,
),
Container(
child: Text("H"),
height: 50,
width: MediaQuery.of(context).size.width,
color: Colors.lightGreen,
)
],
),
);
}
}
image.png
网友评论