Flutter Widget - Container 容器

Posted 2023-03-02 优小U

Container 属性

• child 容器包含的子组件
• color 容器背景色
• padding 内边距
• margin 外边距
• decoration 定义容器形状、颜色
• alignment 子组件在容器内的对齐方式
• constraints 定义宽高
• width 宽(可选)
• height 高(可选)
• transform 变换
• transformAlignment 变换原点的相对位置
• foregroundDecoration 前景装饰
• clipBehavior 【decoration】不为空时的剪切效果
• hashCode
• key
• runtimeType

注意事项：

• Container 会根据子组件自行调整大小；
• 如果用了 decoration属性，外面的color属性就不能用，需要写在decotation里面；
• alignment 可以控制子组件在内部的对齐方式，当设置后，Container会扩展并填充其父级的宽度和高度。可以设置Container的宽度和高度来阻止其填充父级宽高，或者直接用box布局。

import 'package:flutter/material.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(super.key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Container 容器'),
        ),
        body: Container(
          decoration: const BoxDecoration(
            shape: BoxShape.rectangle,
            color: Colors.blue
          ),
          padding: const EdgeInsets.all(20.0),
          margin: const EdgeInsets.all(20.0),
          alignment: Alignment.centerLeft,
          // constraints: const BoxConstraints.tightForFinite(
          //   width: 200
          // ),
          width: 200,
          height: 200,
          transform: Matrix4.rotationZ(0.06),
          child: const Text('Hello Flutter'),

        )
      )
    );