SizedBox

SizedBox 是一个固定尺寸的盒子，也可以用作间距。

构造函数

SizedBox({
  Key? key,                                               // 组件标识
  double? width,                                          // 宽度（null=自适应，double.infinity=撑满）
  double? height,                                         // 高度（null=自适应，double.infinity=撑满）
  Widget? child,                                          // 子组件
})

属性速查

属性	类型	默认值	说明
width	double?	null	宽度（null=自适应，double.infinity=撑满）
height	double?	null	高度（null=自适应，double.infinity=撑满）
child	Widget?	null	子组件

常用构造方式速查

构造方式	说明
SizedBox(width: 200, height: 100)	固定尺寸
SizedBox(width: 200)	仅限宽度
SizedBox(height: 100)	仅限高度
SizedBox(width: double.infinity, ...)	宽度撑满
SizedBox.expand(...)	宽高都撑满父组件
SizedBox.shrink()	尺寸为 0（隐藏但保留位置）
SizedBox.square(dimension: 100)	正方形 100x100

快速示例

固定尺寸

import 'package:flutter/material.dart';

class SizedBoxFixedExample extends StatelessWidget {
  const SizedBoxFixedExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SizedBox 固定尺寸')),
      body: Center(
        // ─── ★ 固定宽高 ──────────────
        child: SizedBox(
          width: 200,
          height: 100,
          child: Container(color: Colors.blue),
        ),
        // ─── ☆ 固定宽高 ──────────────
      ),
    );
  }
}

仅宽度或仅高度

import 'package:flutter/material.dart';

class SizedBoxWidthHeightExample extends StatelessWidget {
  const SizedBoxWidthHeightExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SizedBox 宽高限制')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // ─── ★ 仅限宽度 ──────────────
            SizedBox(width: 200, child: const Text('宽度200')),
            // ─── ☆ 仅限宽度 ──────────────
            const SizedBox(height: 16),
            // ─── ★ 仅限高度 ──────────────
            SizedBox(height: 100, child: Container(color: Colors.orange)),
            // ─── ☆ 仅限高度 ──────────────
          ],
        ),
      ),
    );
  }
}

撑满父组件

import 'package:flutter/material.dart';

class SizedBoxExpandExample extends StatelessWidget {
  const SizedBoxExpandExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SizedBox 撑满')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // 宽度撑满
            // ─── ★ double.infinity 撑满 ──────────────
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(onPressed: () {}, child: const Text('全宽按钮')),
            ),
            // ─── ☆ double.infinity 撑满 ──────────────
            const SizedBox(height: 16),
            // 宽高都撑满
            Expanded(
              // ─── ★ SizedBox.expand ──────────────
              child: SizedBox.expand(
                child: Container(color: Colors.blue),
              ),
              // ─── ☆ SizedBox.expand ──────────────
            ),
          ],
        ),
      ),
    );
  }
}

用作间距

import 'package:flutter/material.dart';

class SizedBoxSpacingExample extends StatelessWidget {
  const SizedBoxSpacingExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SizedBox 间距')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text('第一行'),
            // ─── ★ 垂直间距 ──────────────
            SizedBox(height: 16),
            // ─── ☆ 垂直间距 ──────────────
            Text('第二行'),
          ],
        ),
      ),
    );
  }
}

SizedBox.shrink — 隐藏但保留结构

import 'package:flutter/material.dart';

class SizedBoxShrinkExample extends StatefulWidget {
  const SizedBoxShrinkExample({super.key});

  @override
  State<SizedBoxShrinkExample> createState() => _SizedBoxShrinkExampleState();
}

class _SizedBoxShrinkExampleState extends State<SizedBoxShrinkExample> {
  bool _showIcon = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SizedBox.shrink')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Row(
              children: [
                const Text('标签'),
                // ─── ★ shrink 隐藏 ──────────────
                if (_showIcon) const Icon(Icons.check) else const SizedBox.shrink(),
                // ─── ☆ shrink 隐藏 ──────────────
              ],
            ),
            const SizedBox(height: 16),
            SwitchListTile(
              title: const Text('显示图标'),
              value: _showIcon,
              onChanged: (v) => setState(() => _showIcon = v),
            ),
          ],
        ),
      ),
    );
  }
}

SizedBox.square — 正方形

import 'package:flutter/material.dart';

class SizedBoxSquareExample extends StatelessWidget {
  const SizedBoxSquareExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SizedBox.square')),
      body: Center(
        // ─── ★ SizedBox.square ──────────────
        child: SizedBox.square(
          dimension: 100,    // 宽高都是 100
          child: Container(color: Colors.blue),
        ),
        // ─── ☆ SizedBox.square ──────────────
      ),
    );
  }
}

SizedBox vs Container

特性	SizedBox	Container
尺寸	仅 width/height	width/height + constraints
装饰	无	decoration、color、border 等
内边距	无	padding
对齐	无	alignment
变换	无	transform
性能	更轻量	稍重（组合多种功能）

建议

只需要固定尺寸或间距时，优先使用 SizedBox。需要装饰或更复杂功能时，使用 Container。