Flutter for OpenHarmony Web开发助手App实战：CSS参考

CSS参考手册帮助开发者快速查找CSS属性。今天我们实现一个CSS属性参考页面。

2601_94985743

497人浏览 · 2026-01-31 20:21:25

2601_94985743 · 2026-01-31 20:21:25 发布

在这里插入图片描述

CSS参考手册帮助开发者快速查找CSS属性。今天我们实现一个CSS属性参考页面。

目标

这个页面在实际项目里一般会被放在“前端工具 / 手册”入口下面，打开后能快速查到：

属性名：比如 display、position
一句话说明：避免翻文档时记不住
示例写法：复制粘贴就能用

我这里用 Flutter 做一个简单但能落地的实现：列表可滚动、每条信息清晰分层，示例代码用等宽字体展示。

核心实现（分段展示）

1) 页面文件基础结构

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

这里选择 StatelessWidget，因为“CSS属性参考”大多是静态内容（或者后续改成接口拉取也可以先不引入状态管理）。

另外引入 flutter_screenutil 主要是为了在不同尺寸上让间距和字号更稳一点（16.w / 12.sp 这种写法在项目里很常见）。

2) 准备要展示的数据

final properties = [
  {'prop': 'color', 'desc': '文本颜色', 'example': 'color: #333;'},
  {'prop': 'background', 'desc': '背景', 'example': 'background: #fff;'},
  {'prop': 'font-size', 'desc': '字体大小', 'example': 'font-size: 16px;'},
  {'prop': 'margin', 'desc': '外边距', 'example': 'margin: 10px;'},
  {'prop': 'padding', 'desc': '内边距', 'example': 'padding: 10px;'},
  {'prop': 'border', 'desc': '边框', 'example': 'border: 1px solid #ccc;'},
  {'prop': 'display', 'desc': '显示类型', 'example': 'display: flex;'},
  {'prop': 'position', 'desc': '定位', 'example': 'position: relative;'},
  {'prop': 'width', 'desc': '宽度', 'example': 'width: 100%;'},
  {'prop': 'height', 'desc': '高度', 'example': 'height: 200px;'},
];

我这里先用 List<Map<String, String>> 快速把功能跑通。

在真实项目里，如果后面要做搜索、收藏、分组（布局类/文本类/盒模型等），建议再把 Map 换成一个 model 类，不然后期字段一多会比较难维护。

3) 搭页面骨架（Scaffold + AppBar）

return Scaffold(
  appBar: AppBar(title: const Text('CSS参考')),
  body: ListView.builder(
    padding: EdgeInsets.all(16.w),
    itemCount: properties.length,
    itemBuilder: (context, index) {
      // ...
    },
  ),
);

这里直接用 ListView.builder，原因很简单：

性能更稳：条目多的时候也不会一次性把所有子组件都 build 出来
交互更自然：滚动、回弹这些系统默认行为都能直接用

另外 padding: EdgeInsets.all(16.w) 是为了给内容留“呼吸感”，实际做工具类页面时比贴边更舒服。

4) 单条数据用 Card 展示

final prop = properties[index];
return Card(
  margin: EdgeInsets.only(bottom: 12.h),
  child: Padding(
    padding: EdgeInsets.all(16.w),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // ...
      ],
    ),
  ),
);

用 Card 的好处是信息“天然成块”，用户扫一眼就知道这一块是一个属性；同时 margin 把每条卡片分隔开，滚动时不会糊成一片。

Column(crossAxisAlignment: CrossAxisAlignment.start) 这点很关键：工具类信息基本都是左对齐更利于快速浏览。

5) 属性名、说明、示例三段信息

Text(
  prop['prop']!,
  style: TextStyle(
    fontSize: 16.sp,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
),
SizedBox(height: 4.h),
Text(prop['desc']!, style: TextStyle(fontSize: 14.sp)),

这里我把“属性名”做成了更醒目的样式（加粗 + 蓝色），用户第一眼能先定位到关键词。

“说明”这行保持正常字号就行，避免喧宾夺主。

6) 示例代码块（等宽字体 + 轻背景）

SizedBox(height: 8.h),
Container(
  padding: EdgeInsets.all(8.w),
  decoration: BoxDecoration(
    color: Colors.grey[100],
    borderRadius: BorderRadius.circular(4.r),
  ),
  child: Text(
    prop['example']!,
    style: TextStyle(
      fontFamily: 'monospace',
      fontSize: 12.sp,
    ),
  ),
),

这块的目标是让用户一眼看出“这是可复制的代码”。

等宽字体：更像编辑器里的代码
浅灰背景：跟上面的描述文案拉开视觉层次
圆角：在移动端观感更柔和

如果你后续要加“点击复制”，一般就在这个 Container 外面套一层 InkWell 或者 GestureDetector，再接剪贴板即可。

在项目里怎么接入（常见做法）

如果你的项目是通过 routes 管理页面，可以像下面这样把页面挂进去：

routes: {
  '/css_reference': (context) => const CssReferencePage(),
},

这样在其它页面里就能通过 Navigator.pushNamed(context, '/css_reference') 打开。

我一般会把这种“工具页/参考页”的路由路径统一放到一个文件里集中维护（不然项目大了到处都是字符串，改一次很麻烦）。

一些容易踩的点

ScreenUtil 未初始化：如果你在 main 里没有包 ScreenUtilInit，16.w / 12.sp 的效果会不对。这个问题很常见，尤其是从纯 Flutter 项目迁移到多端适配时。
数据源后期会变：现在是写死列表，后续如果改成从 JSON / 接口拉取，建议把 properties 抽出去，避免 build 方法太长。
字体兼容：monospace 在不同平台的字体细节不完全一致，如果你对展示特别挑，可以考虑指定更明确的字体族（前提是项目里已经配置好）。