Container 容器布局

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Container 容器布局",
    home: LayoutDemo(),
  ));
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget container = Container(
      decoration: BoxDecoration(
        color: Colors.grey,
      ),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  width: 150.0,
                  height: 150.0,
                  decoration: BoxDecoration(
                    border: Border.all(width: 10.0, color: Colors.blueGrey),
                  ),
                  margin: const EdgeInsets.all(4.0),
                  child: Image.network(
                      "https://static.lidong.me/upload/XjGwvaVAI.png"),
                ),
              ),
              Expanded(
                child: Container(
                  width: 150.0,
                  height: 150.0,
                  decoration: BoxDecoration(
                    border: Border.all(
                      width: 10.0,
                      color: Colors.blueGrey,
                    ),
                  ),
                  child: Image.network(
                      "https://static.lidong.me/upload/c7QdErvcb.png"),
                ),
              )
            ],
          ),
          Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  width: 150.0,
                  height: 150.0,
                  decoration: BoxDecoration(
                    border: Border.all(width: 10.0, color: Colors.blueGrey),
                    borderRadius: BorderRadius.all(Radius.circular(8.0)),
                  ),
                  margin: EdgeInsets.all(4.0),
                  child: Image.network(
                      "https://static.lidong.me/upload/c7QdErvcb.png"),
                ),
              ),
              Expanded(
                child: Container(
                  width: 150.0,
                  height: 150.0,
                  decoration: BoxDecoration(
                    border: Border.all(
                      width: 10.0,
                      color: Colors.blueGrey,
                    ),
                    borderRadius: BorderRadius.all(const Radius.circular(4.0)),
                  ),
                  margin: EdgeInsets.all(4.0),
                  child: Image.network(
                      "https://static.lidong.me/upload/XjGwvaVAI.png"),
                ),
              )
            ],
          )
        ],
      ),
    );
    return Scaffold(
      appBar: AppBar(
        title: Text('Container 容器布局'),
      ),
      body: container,
    );
  }
}