实现主界面
本章节将引导你从组件拆分和布局设计入手,逐步完成界面的编码和样式设置,最终实现一个主界面。完成本章后你将学会:
- TypeScript 的基础语法
- JSX 表达式的写法
- 为界面添加样式
- 将组件展示在窗口内
- 更改窗口标题
拆分组件
主界面展示了程序的各项信息,以文本为主,因此可按信息类型来划分组件,也就是每项信息为一个组件。
对于程序图标的展示,因为 LCUI 暂无功能类似于 <img>
的组件,所以我们使用 CSS 的 background-image 属性将图标作为组件的背景图来显示。
设计布局
内容水平居中,从上到下排列展示每一项信息。
为方便调整内容外间距,我们将内容都放到一个容器组件内,通过设置其 margin-left 和 margin-right 属性为 auto 来实现水平居中。然后设置 margin-top 属性避免内容贴合上边界。为了让内容在窗口宽度过小时贴合左右边界,我们还应设置容器组件的 padding-left 和 padding-right 属性。
描述界面结构
结合上述的组件拆分和布局设计,我们可以得出以下结构:
主界面
容器
头部容器
图标
名称
版本
描述
用法介绍
让我们将它转换成 TypeScript 代码。首先使用 import 语句从 LCUI 的 React 库 @lcui/react
中引入基础组件:
src/home.tsx
import { Text, Widget } from "@lcui/react";
引入项目根目录中的 package.json 文件以获取基本信息:
src/home.tsx
import pkg from "../package.json";
接着定义组件函数,命名为 Home,作为默认导出:
src/home.tsx
export default function Home() {
}