美文网首页
Flutter 基础布局 Column Widget

Flutter 基础布局 Column Widget

作者: Cache技术分享 | 来源:发表于2021-02-07 17:28 被阅读0次

    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

    相关文章

      网友评论

          本文标题:Flutter 基础布局 Column Widget

          本文链接:https://www.haomeiwen.com/subject/gnwztltx.html