Flutter 基础布局 Column Widget

 

文章目录

• Flutter 基础布局 Column Widget
• Column Widget

 

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