第 4 章 UI 构建与组件体系

第 4 章 · UI 构建与组件体系

章节摘要：本章回答"界面到底怎么搭"这个从概念到实操的关键一步。React Native 用 View、Text、Image、FlatList 等核心组件加 StyleSheet 与 Flexbox 搭界面，Flutter 用各类 Widget 与布局容器搭界面。读完本章，你将能独立搭建一个多组件、可滚动、响应式的完整页面，并理解两套组件体系背后的共同设计逻辑。

本节导航

阅读完本章，你应当能够：

1. 说出 React Native 核心组件（View、Text、Image、TextInput、FlatList）的用途。
2. 用 StyleSheet 与 Flexbox 完成 RN 的布局与样式。
3. 说出 Flutter 常用 Widget（Container、Row、Column、Stack、ListView）的用途。
4. 用布局 Widget 组合出常见的页面结构。
5. 理解两套组件体系在"声明式描述界面"上的共同逻辑，并能在两者之间迁移组件知识。

核心概念速览

一句话点题：两套组件体系的标签名不同、语法不同，但"用组件描述界面结构"的逻辑高度一致——学会一套，另一套只是换名字。

子章节导航

4.1 React Native 内置组件与样式

认识 View、Text、Image、TextInput、Button 等核心组件，掌握 StyleSheet 定义样式与 Flexbox 布局。这是 RN 界面的全部基础。

这一节的写法延续第 3 章的"组件 + 实际用法"思路：每个组件先讲它对应 Web 里的哪个概念（View 对应 div、Text 对应 span），再讲在 RN 里的特殊之处。为什么这样讲？因为大部分读者对 div、span 已经熟悉，利用旧知识定位新组件，比从零记一堆新标签高效得多。样式部分同样如此——RN 的样式"像 CSS 但不是 CSS"，驼峰命名、对象写法、无继承这些差异点需要单独建立认知。

4.2 Flutter Widget 分类与布局

认识 Container、Row、Column、Stack、Expanded 等布局 Widget，理解 Widget 如何通过嵌套与属性实现布局。这是 Flutter 界面的全部基础。

Flutter 的布局思路与 RN 有本质不同：RN 用一套统一的 Flexbox 规则，Flutter 则用不同的布局 Widget 表达不同的布局意图——Row 管水平排列、Column 管垂直排列、Stack 管堆叠、Expanded 管弹性占位。理解"布局意图对应 Widget"这一条，是读 Flutter 布局代码的关键。读这节时建议对照第 2 章的 Flutter 项目，把 Row 和 Column 改来改去看效果，体感比概念来得快。

4.3 常用 UI 组件实战：按钮、输入框、列表

把两套组件放到真实需求里：做一个带输入、按钮、列表的完整界面，看两套框架如何完成同一种需求。这是本章的动手重点。

这一节是"双框架对照"的典型样例：同一个需求——输入文字、点按钮、加入列表——在 RN 里怎么写、在 Flutter 里怎么写。你会在对照中看到两套框架处理同一问题的不同取舍：RN 用 FlatList 做高性能列表，Flutter 用 ListView；RN 用 TextInput 加 onChangeText，Flutter 用 TextField 加控制器。这种"同一需求两种解法"的练习，是双框架学习最核心的训练方式。

4.4 响应式布局与多端适配

处理不同屏幕尺寸：RN 用 Flexbox 与平台判断，Flutter 用布局 Widget 与媒体查询。讲清"一套代码适配多尺寸"的原理与边界。

这一节回答一个很现实的问题：同样的代码，在小屏手机、大屏手机、平板甚至横竖屏切换时，界面会不会崩？答案是不会崩，但需要你理解适配的原理。RN 与 Flutter 都采用"相对布局优先"的策略：用 flex 比例、弹性布局而非固定像素来安排元素。这节会讲透 Flexbox 的弹性机制、尺寸单位的差异（RN 的 dp、Flutter 的逻辑像素），以及何时需要按平台写不同代码。读完后，你会对"适配"这件事既有原理又有分寸。

4.4.1 关于本章的全局观

在进入细节前先给一个全景判断：React Native 与 Flutter 的组件体系，本质是同一套设计思想的两个实现。它们的共同点包括——组件化（界面拆成可复用单元）、声明式（描述界面而非操作界面）、层级化（组件嵌套成树）、样式与结构分离（RN 的 StyleSheet、Flutter 的样式属性）。抓住这四条共同线，你在两个框架之间迁移时，需要记的就只是"名字与语法差异"，而非"完全不同的世界观"。

子章节之间的逻辑关系

4.1 与 4.2 是并行的组件体系入门，分别建立两套组件的认知；4.3 把组件用于真实界面，检验组合能力；4.4 是进阶——组件搭出来的页面如何适配不同屏幕。顺序是"认识组件 → 组合组件 → 适配屏幕"。

这里要特别提醒：4.3 是全章的分水岭。如果前两节你只是"看懂了"，那么到 4.3 请务必动手敲代码。把一个输入框、一个按钮、一个列表完整跑起来，胜过读十遍概念。组件体系的精髓不在记住每个组件的属性，而在亲手组合出可用的界面。等到 4.4 做适配时，你会发现前面亲手搭的页面正是最好的试验田——改几个尺寸、转个横屏，看布局怎么响应。

4.1 RN 组件 ──► 4.3 常用组件实战（双框架对照）
                    │
4.2 Flutter Widget ─┘
                    │
                    └► 4.4 响应式布局与多端适配
​

关于本章的一份学习建议

组件体系是"看得见摸得着"的一章，建议把阅读与动手的比例调到一比三——读一小时组件介绍，配三小时组件实践。第 4.3 节的待办页面是本章的枢纽练习：它把 4.1 与 4.2 的组件知识、4.3 的组合能力、4.4 的适配思路全部串起来。做完这个练习，你会同时收获"能搭界面"与"能适配界面"两项能力。本章结束时，你应该能不看参考、独立写一个包含输入、按钮、列表、状态切换、多尺寸验证的完整页面——这是对"组件体系"最实在的检验。

前置知识与后续延伸

• 前置知识：第 3 章的 JSX 与 Widget 树基础。本章的组件就是在 JSX 与 Dart 语法之上搭建界面。声明式思维（UI 是状态的函数）会帮助你理解组件为何这样组合。
• 后续延伸：本章的组件是第 5 章状态管理的载体——带状态的组件（输入框、列表）正是状态管理要处理的对象。列表与滚动性能也是第 6 章调试性能时的常见主题。学完本章后，建议你做一个"待办清单"小页面作为本章作业，它会在第 5、6 章被反复用作示例。