Flutter 教程：SizedBox 和类似 ListTile 控件详解

概述

Flutter 中的 SizedBox 控件是一个灵活且多用途的控件，它允许开发人员创建固定高度或宽度的矩形容器。它广泛用于构建自定义布局和调整子控件的位置和大小。此外，本文还将深入探讨与 SizedBox 类似的 ListTile 控件，它是一种预定义的控件，专门用于创建列表项。

SizedBox

特点

• 创建具有固定高度或宽度的矩形容器
• 可指定确切的尺寸（以像素为单位）或使用灵活的约束（例如最大宽度或最小高度）
• 提供对齐选项，以控制容器内子控件的位置
• 支持背景颜色、边框和圆角等样式选项

用法

SizedBox(
  height: 50, // 指定固定高度为 50 像素
  width: 100, // 指定固定宽度为 100 像素
  child: Text('这是 SizedBox 控件'),
);

ListTile

特点

• 预定义的控件，专门用于创建列表项
• 包含预定义的布局和样式，包括文本、图标和辅助文本
• 提供灵活的定制选项，允许开发人员调整外观和行为
• 内置交互功能，例如点击和拖动

用法

ListTile(
  title: Text('列表项标题'),
  subtitle: Text('列表项子标题'),
  leading: Icon(Icons.star), // 领先图标
  trailing: Icon(Icons.arrow_forward_ios), // 尾随图标
  onTap: () { /* 处理点击事件 */ },
);

示例：使用 SizedBox 创建自定义布局

Row(
  children: [
    SizedBox(
      width: 100, // 左侧固定宽度为 100 像素
      child: Text('左列文本'),
    ),
    Expanded( // 中间列自动扩展以填充剩余空间
      child: Text('中间列文本'),
    ),
    SizedBox(
      width: 50, // 右侧固定宽度为 50 像素
      child: Text('右列文本'),
    ),
  ],
);

示例：使用 ListTile 创建列表项

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('列表项 ${index + 1}'),
      subtitle: Text('子标题 ${index + 1}'),
      leading: Icon(Icons.star),
    );
  },
);