Flutter for OpenHarmony 文件转换助手App实战 - 工具页面

工具列表是一个包含多个Map的列表。每个Map包含了工具的图标和标题。这样的设计有几个优点。{'icon': Icons.qr_code_2, 'title': '二维码生成'},{'icon': Icons.barcode_reader, 'title': '条形码生成'},{'icon': Icons.fingerprint, 'title': 'Hash计算'},{'icon': Icons

2601_94994779

720人浏览 · 2026-01-23 18:57:18

2601_94994779 · 2026-01-23 18:57:18 发布

工具页面提供了各种实用工具，包括二维码生成、Hash计算、Base64编码等。这个页面使用GridView来展示所有可用的工具，让用户能够一眼看到所有工具。工具页面的设计强调了易用性和可扩展性，用户可以快速找到所需的工具，同时添加新工具也非常简单。

工具页面的整体架构

工具页面是一个StatelessWidget，因为它不需要维护任何状态。页面的核心是定义一个工具列表，然后使用GridView来展示这些工具。

class ToolsPage extends StatelessWidget {
  const ToolsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final tools = [
      {'icon': Icons.qr_code_2, 'title': '二维码生成'},
      {'icon': Icons.barcode_reader, 'title': '条形码生成'},
      {'icon': Icons.fingerprint, 'title': 'Hash计算'},
      {'icon': Icons.vpn_key, 'title': 'Base64编码'},
      {'icon': Icons.data_object, 'title': 'JSON格式化'},
      {'icon': Icons.search, 'title': '正则表达式'},
      {'icon': Icons.palette, 'title': '颜色选择器'},
      {'icon': Icons.straighten, 'title': '单位转换'},
      {'icon': Icons.text_fields, 'title': '文本转换'},
      {'icon': Icons.description, 'title': 'Markdown预览'},
      {'icon': Icons.calculate, 'title': '计算器'},
      {'icon': Icons.timer, 'title': '计时器'},
    ];

这个架构的设计思路很清晰。我们定义了一个tools列表，其中每个元素都是一个Map，包含了工具的图标和标题。这样的设计使得添加新工具变得非常简单，只需要在列表中添加新的Map即可。

工具列表的定义

工具列表是一个包含多个Map的列表。每个Map包含了工具的图标和标题。这样的设计有几个优点。

final tools = [
  {'icon': Icons.qr_code_2, 'title': '二维码生成'},
  {'icon': Icons.barcode_reader, 'title': '条形码生成'},
  {'icon': Icons.fingerprint, 'title': 'Hash计算'},
  {'icon': Icons.vpn_key, 'title': 'Base64编码'},
  {'icon': Icons.data_object, 'title': 'JSON格式化'},
  {'icon': Icons.search, 'title': '正则表达式'},
  {'icon': Icons.palette, 'title': '颜色选择器'},
  {'icon': Icons.straighten, 'title': '单位转换'},
  {'icon': Icons.text_fields, 'title': '文本转换'},
  {'icon': Icons.description, 'title': 'Markdown预览'},
  {'icon': Icons.calculate, 'title': '计算器'},
  {'icon': Icons.timer, 'title': '计时器'},
];

这个列表包含了12个工具。每个工具都有一个图标和标题。使用Map来存储工具信息的好处是，如果需要添加新的属性（比如工具的描述），只需要在Map中添加新的键值对即可，不需要修改其他代码。这样的设计提高了代码的灵活性和可维护性。

页面的布局结构

工具页面使用Scaffold作为基础容器。AppBar显示页面标题，body使用GridView来展示工具卡片。

return Scaffold(
  appBar: AppBar(title: const Text('工具箱')),
  body: GridView.count(
    crossAxisCount: 2,
    padding: EdgeInsets.all(12.w),
    mainAxisSpacing: 12.h,
    crossAxisSpacing: 12.w,
    children: tools.map((tool) {
      return ToolCard(
        icon: tool['icon'] as IconData,
        title: tool['title'] as String,
        onTap: () => _showToolDetail(context, tool['title'] as String),
      );
    }).toList(),
  ),
);

这个布局的设计很清晰。GridView.count 是一个网格布局组件，它根据指定的列数来排列子Widget。crossAxisCount: 2 表示每行显示2个工具卡片。这样的设计充分利用了屏幕宽度，同时保持了良好的可读性。

padding: EdgeInsets.all(12.w) 为整个GridView添加了内边距。mainAxisSpacing: 12.h 和 crossAxisSpacing: 12.w 分别设置了卡片之间的垂直和水平间距。这些间距使用flutter_screenutil的适配单位，确保在不同设备上都有合适的大小。

工具卡片的映射

工具列表通过map函数转换为ToolCard列表。这是一个函数式编程的例子。

children: tools.map((tool) {
  return ToolCard(
    icon: tool['icon'] as IconData,
    title: tool['title'] as String,
    onTap: () => _showToolDetail(context, tool['title'] as String),
  );
}).toList(),

map 函数将工具列表中的每个元素转换为一个ToolCard。as 操作符用来进行类型转换，确保从Map中取出的值具有正确的类型。toList() 将Iterable转换为List，这是GridView所需的。

这样的设计使得添加新工具变得非常简单。只需要在tools列表中添加新的Map，GridView会自动创建对应的ToolCard。

ToolCard组件的实现

ToolCard是一个自定义组件，用来展示工具的图标和标题。它类似于FeatureCard，但专门为工具页面设计。

class ToolCard extends StatelessWidget {
  final IconData icon;
  final String title;
  final VoidCallback onTap;

  const ToolCard({
    Key? key,
    required this.icon,
    required this.title,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Card(
        elevation: 2,
        child: Padding(
          padding: EdgeInsets.all(12.w),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(icon, size: 40.sp, color: Colors.blue),
              SizedBox(height: 8.h),
              Text(
                title,
                style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

ToolCard是一个StatelessWidget，因为它不需要维护任何状态。它接收三个参数：icon、title和onTap。GestureDetector 用来处理点击事件。当用户点击卡片时，onTap回调会被触发。

Card 组件提供了卡片的基础样式，包括圆角和阴影。elevation: 2 设置了阴影深度。Padding 为卡片内容添加了内边距。Column 用来垂直排列图标和标题。mainAxisAlignment: MainAxisAlignment.center 使图标和标题居中对齐。

工具详情对话框

当用户点击任何工具卡片时，会显示一个对话框，提供工具的输入和输出界面。

void _showToolDetail(BuildContext context, String title) {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: Text(title),
      content: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              maxLines: 4,
              decoration: InputDecoration(
                hintText: '输入内容',
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(8.r)),
              ),
            ),
            SizedBox(height: 12.h),
            TextField(
              readOnly: true,
              maxLines: 4,
              decoration: InputDecoration(
                hintText: '输出结果',
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(8.r)),
              ),
            ),
          ],
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('关闭'),
        ),
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('执行'),
        ),
      ],
    ),
  );
}