Flutter 基础布局 Container Widget

Container将会是我们以后最常用的控件之一，Container是单容器类控件，即只包含一个子控件。Container可以装饰和定位子控件，例如设置背景颜色、形状等。

Container 具体用法

• alignment 对齐排列方式
• padding padding
• color 背景色
• decoration 背景装饰
• foregroundDecoration 前景装饰
• wdith 宽度
• height 高度
• constraints 容器约束条件
• transform 旋转变换
• child 布局子Widget

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ContainerExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ContainerExampleState();
  }
}

class ContainerExampleState extends State<ContainerExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Container Widget"),
      ),
      body: Container(
        constraints: BoxConstraints.expand(
          height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
        ),
        padding: const EdgeInsets.all(8.0),
        color: Colors.tealAccent.shade400,
        alignment: Alignment.center,
        child: Text(
          "Hello World",
          style: Theme.of(context)
              .textTheme
              .display1
              .copyWith(color: Colors.white),
        ),
        foregroundDecoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(
                    'https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/776eaf92140f6f8f3c3f39fb51de2cc4~300x300.image'),
                centerSlice: Rect.fromLTRB(270, 180, 1360, 730))),
        transform: Matrix4.rotationZ(0.1),
      ),
    );
  }
}

image.png

示例2

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Container1Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "容器组件示例",
      home: Scaffold(
        appBar: AppBar(
          title: Text("容器组件示例"),
        ),
        body: Center(
          // 添加容器
          child: Container(
            width: 200,
            height: 200,
            // 添加边框装饰效果
            decoration: BoxDecoration(
              color: Colors.white,
              // 设置上下左右四哥边框的样式（颜色，边框宽度）
              border: Border.all(color: Colors.grey, width: 8.0),
              // 边框的弧度
              borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
            ),
            child: Text(
              "容器组件示例",
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 28.0),
            ),
          ),
        ),
      ),
    );
  }
}

image.png

示例3

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Container2Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      title: "容器组件示例",
      home: Scaffold(
        appBar: AppBar(
          title: Text("容器组件示例"),
        ),
        body: Column(
          children: [
            Row(
              children: [
                // 防止内容溢出
                Expanded(
                  child: Container(
                    width: 150.0,
                    height: 150.0,
                    decoration: BoxDecoration(
                      // 边框设置为10.0蓝灰色
                      border: Border.all(width: 10.0, color: Colors.blueGrey),
                      // 圆角8.0
                      borderRadius: BorderRadius.all(Radius.circular(8.0)),
                    ),
                    //边距4.0
                    margin: EdgeInsets.all(4.0),
                    child: Image.asset("images/1.jpg"),
                  ),
                ),
                Expanded(
                  child: Container(
                    width: 150.0,
                    height: 150.0,
                    decoration: BoxDecoration(
                      // 边框设置为10.0蓝灰色
                      border: Border.all(width: 10.0, color: Colors.blueGrey),
                      // 圆角8.0
                      borderRadius: BorderRadius.all(Radius.circular(8.0)),
                    ),
                    //边距4.0
                    margin: EdgeInsets.all(4.0),
                    child: Image.asset("images/2.jpg"),
                  ),
                ),
              ],
            ),
            Row(
              children: [
                // 防止内容溢出
                Expanded(
                  child: Container(
                    width: 150.0,
                    height: 150.0,
                    decoration: BoxDecoration(
                      // 边框设置为10.0蓝灰色
                      border: Border.all(width: 10.0, color: Colors.blueGrey),
                      // 圆角8.0
                      borderRadius: BorderRadius.all(Radius.circular(8.0)),
                    ),
                    //边距4.0
                    margin: EdgeInsets.all(4.0),
                    child: Image.asset("images/3.jpg"),
                  ),
                ),
                Expanded(
                  child: Container(
                    width: 150.0,
                    height: 150.0,
                    decoration: BoxDecoration(
                      // 边框设置为10.0蓝灰色
                      border: Border.all(width: 10.0, color: Colors.blueGrey),
                      // 圆角8.0
                      borderRadius: BorderRadius.all(Radius.circular(8.0)),
                    ),
                    //边距4.0
                    margin: EdgeInsets.all(4.0),
                    child: Image.asset("images/4.jpg"),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

image.png