Flutter Container SizeBox

直接看代码案例快速入手Flutter

本文介绍Container, SizeBox。

Container 是一个更通用的布局组件，提供了多种布局和样式属性，而 SizedBox 是一个专门用于设置子组件大小的简单组件

🎉下载GitHub仓库，直接体验

Container

Container(
    width: 200.0,
    height: 50.0,
    color: Colors.blue,
    margin: const EdgeInsets.all(5.0), // 设置外边距
    padding: const EdgeInsets.all(10.0), // 设置内边距
    
    child: const Text('Hello, Flutter!'),
),
Container(
    width: 200.0,
    height: 50.0,

    margin: const EdgeInsets.all(5.0), // 设置外边距
    padding: const EdgeInsets.all(10.0), // 设置内边距
    decoration: BoxDecoration(
    border: Border.all(
        color: Colors.red,
        width: 2.0,
    ),
    borderRadius: BorderRadius.circular(10.0),
    color: Colors.blue,

    ),
    child: const Text('Hello, Flutter!'),
),
Container(
    decoration: const BoxDecoration(
    gradient: LinearGradient(
        colors: [Colors.red, Colors.blue],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
    ),
    ),
    child: const Text('Hello, Flutter!'),
),
Container(
    decoration: BoxDecoration(
    boxShadow: [
        BoxShadow(
        color: Colors.black.withOpacity(0.5),
        blurRadius: 10.0,
        offset: const Offset(0, 5),
        ),
    ],
    ),
    child: const Text('Hello, Flutter!'),
),
Container(
    alignment: Alignment.center, // 将子组件置于容器中央
    child: const Text('Hello, Flutter!'),
)

SizeBox

SizedBox(
    width: 100,
    height: 100,
    child: Container(color: Colors.red),
),
SizedBox(
    width: 100,
    child: Container(color: Colors.red, height: 50),
),
Column(
    children: [
    Container(color: Colors.red, height: 50),
    const SizedBox(height: 10), // 添加 10 像素高的空白空间
    Container(color: Colors.green, height: 50),
    ],
),