Container 详解

柔光的暖阳◎ 2021-09-13 15:30 333阅读 0赞

**代码示例：**

import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Container组件',
          home: Scaffold(
            appBar: AppBar(
              title: Text('Container组件'),
            ),
            body: Center(
              //父容器
              child: Container(
                  // 容器的宽度
    //              width: 200.0,
    //              // 容器的高度
    //              height: 200.0,
                  // 容器尺寸限制，可设置，最大宽度，最小宽度，最大高度，最小高度
                  // 其中 不管设置最大，最小，若和width、height属性并存，则以width、height属性为准
    
                  constraints: BoxConstraints(
                      maxWidth: 200, //宽度尽可能大
                      maxHeight: 200 //最小高度为50像素
                      ),
                  // 外边距
                  margin: EdgeInsets.all(100.0),
                  // 内边距
                  padding: EdgeInsets.all(20.0),
                  //内边距
                  //容器内的方框装饰
                  decoration: BoxDecoration(
                    //容器内的方框
                    border: Border.all(
                      color: Colors.black,
                      width: 10.0, //边框粗细
                    ),
                    //容器内的方框弧度
                    borderRadius: BorderRadius.all(const Radius.circular(10.0)),
                  ),
                  //子容器
                  child: Text("你好") // 默认位置左上角
                  ),
            ),
          ),
        );
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70]: /images/20210913/1e380647f93648efbbdc07cb73f67e3b.png