Box Model 盒模型

本文介绍Flutter的Container组件，该组件类似web的div，可以设置Margin、Border、Padding、Content。

盒模型

盒子模型在 web 中是基础，所以本文参考了 mozilla w3schools。

• 定义

  • Margin(外边距) - 边框意外的距离。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 边框内部到内容的距离。
  • Content(内容) - 盒子的内容，显示文本和图像。

• 示例

  import 'package:flutter/material.dart';
  
  void main(List<String> args) {
    runApp(const ModelBox());
  }
  
  
  class ModelBox extends StatelessWidget {
    const ModelBox({Key? key}): super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Box Model'),
          ),
          body: Container(
            margin: const EdgeInsets.all(50),
            padding: const EdgeInsets.all(30),
            child: const Text('Box'),
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              border: Border.all(
                color: Colors.amberAccent,
                width: 20,
                style: BorderStyle.solid
              )
            ),
          ),
        ),
      );
    }
  }