Android Compose基于单向数据流构建界面的过程
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>构建 Compose 界面</li><ul class="second_class_ul"><li>单向数据流</li><ul class="third_class_ul"><li>什么是状态向下流动，事件向上传递</li><li>遵循该模式的三大优势</li></ul><li>Jetpack Compose 中的单向数据流</li><ul class="third_class_ul"><li>三个核心要点</li></ul><li>定义可组合项参数</li><ul class="third_class_ul"></ul><li>Compose 中的事件</li><ul class="third_class_ul"><li>传递不可变值的优势</li><li>通用可组合项示例</li></ul><li>ViewModel、状态和事件：示例</li><ul class="third_class_ul"><li>登录屏幕的状态与事件建模</li><li>其他状态容器的用法</li></ul></ul></ul></div><p class="maodian"></p><h2>构建 Compose 界面</h2><p>在 Jetpack Compose 中构建界面，核心逻辑围绕“状态控制”展开，因为 Compose 的界面本身是不可变的 : 一旦绘制完成，就没法直接修改。我们能操控的只有界面的状态，只要状态发生变化，Compose 就会智能地重新创建界面树中那些已经改变的部分。像 <code>TextField</code> 这样的可组合项，就是典型的“接收状态、公开事件”的组件：它接收一个值来显示文本，同时通过 <code>onValueChange</code> 回调这种事件，来处理用户修改文本的操作。比如下面这段常见代码：</p>
<div class="jb51code"><pre class="brush:java;">var name by remember { mutableStateOf("")}
OutlinedTextField(
value = name,
onValueChange = { name =it },
label ={ Text ("Name" )}
)</pre></div>
<p>由于可组合项天生具备“接收状态、公开事件”的特性，单向数据流模式和 Jetpack Compose 可以说是完美适配。这篇指南就专门讲怎么在 Compose 里用单向数据流模式、怎么实现事件和状态容器，还有如何结合 ViewModel 使用。</p>
<p>注意：用 Jetpack Compose 开发界面，并不会影响应用的其他层，比如负责数据存储的<strong>数据层</strong>和负责业务逻辑的<strong>业务层</strong>。如果想了解整个应用所有层级的构建方法，可以参考官方的应用架构指南。</p>
<p class="maodian"></p><h3>单向数据流</h3>
<p>单向数据流（UDF）是一种简单清晰的设计模式，核心规则就两条：<strong>状态向下流动，事件向上传递</strong>。采用这种模式后，负责显示状态的可组合项，和负责存储、修改状态的应用部分就能彻底分离开，各司其职。</p>
<p class="maodian"></p><h4>什么是状态向下流动，事件向上传递</h4>
<ol><li><strong>状态向下流动</strong>
<ol><li><strong>核心定义</strong>：<strong>状态</strong>（比如界面要显示的文本内容、按钮是否可点击、加载框是否显示等，通常存储在 ViewModel 或上层可组合项中），是从<strong>上层组件/数据层</strong>传递到<strong>下层组件/界面层</strong>的，下层组件只能被动接收和使用状态，不能直接修改上层传来的状态。</li><li><strong>Compose 实际场景</strong>：<ul><li>比如 ViewModel 中维护着一个 <code>uiState</code> 状态（包含登录状态、用户昵称等数据），这个状态会向下传递给登录界面、个人中心界面等可组合项；</li><li>父可组合项定义的 <code>isButtonEnabled</code> 状态，向下传给子可组合项 <code>Button</code>，用于控制按钮是否可点击；</li><li>下层组件拿到状态后，只能用它来渲染界面，比如根据 <code>uiState</code> 中的昵称显示文本，根据 <code>isButtonEnabled</code> 决定按钮的交互状态。</li></ul></li></ol></li><li><strong>事件向上流动</strong><ol><li><strong>核心定义</strong>：<strong>事件</strong>（比如用户点击按钮、输入文本、下拉刷新等用户操作，或是系统通知等），是从<strong>下层组件/界面层</strong>传递到<strong>上层组件/数据层</strong>的，下层组件不处理事件逻辑，只负责将事件“上报”，由上层组件统一处理并更新状态。</li><li><strong>Compose 实际场景</strong>：<ul><li>用户点击登录按钮，这个点击事件不会在 <code>Button</code> 组件内部处理，而是通过 <code>onClick</code> 回调向上传递给 ViewModel，由 ViewModel 执行登录请求、校验账号密码等业务逻辑；</li><li>用户在 <code>TextField</code> 输入文本，通过 <code>onValueChange</code> 回调将输入事件向上传递，由上层组件（或 ViewModel）更新对应的文本状态；</li><li>事件处理完成后，上层组件会更新状态，而更新后的状态又会顺着“向下流动”的规则，重新传递给下层界面，触发界面重组。</li></ul></li></ol></li></ol>
<p>这就是单向数据流界面更新的三步完整循环，逻辑一目了然 :</p>
<ol><li><strong>产生事件</strong>：要么是界面上的操作生成事件（比如用户点击按钮），并把事件向上传递给 ViewModel 处理；要么是应用其他层传来事件（比如提示用户登录会话已过期）。</li><li><strong>更新状态</strong>：事件被处理后，对应的业务逻辑会修改相关的状态。</li><li><strong>显示状态</strong>：存储状态的容器会把新状态向下传递给界面，界面再根据新状态刷新显示。</li></ol>
<p class="maodian"></p><h4>遵循该模式的三大优势</h4>
<p>在 Jetpack Compose 中使用单向数据流，能解决开发中的不少麻烦，带来三个核心好处：</p>
<ol><li><strong>可测试性更强</strong>：状态和界面分离开，我们可以单独测试状态的逻辑是否正确，也能单独验证界面显示是否符合预期，不用混在一起测试。</li><li><strong>状态封装更严谨</strong>：状态的更新被限制在一个固定位置，而且可组合项的状态只有一个可信来源，不会出现多个地方改状态导致的状态不一致问题，能大幅减少 Bug。</li><li><strong>界面显示更一致</strong>：只要用 <code>StateFlow</code> 或者 <code>LiveData</code> 这类可观察的状态容器，任何状态更新都会立刻反映在界面上，不会出现“状态变了，界面没更”的情况。</li></ol>
<p class="maodian"></p><h3>Jetpack Compose 中的单向数据流</h3>
<p>可组合项的工作核心就是“状态”和“事件”。比如 <code>TextField</code>，只有当它的 <code>value</code> 参数更新，并且通过 <code>onValueChange</code> 回调（本质是请求改值的事件）触发时，它才会更新显示内容。</p>
<p>在 Compose 里，<code>State</code> 对象是专门用来存值的容器，而且它有个关键特性：<strong>状态值一旦改变，就会触发读取该值的可组合函数重组</strong>。我们存储状态有两种常用方式，选哪种取决于需要保留状态的时长：</p>
<ul><li><code>remember { mutableStateOf(value) }</code></li><li><code>rememberSaveable { mutableStateOf(value) }</code></li></ul>
<p><code>TextField</code> 的值是 <code>String</code> 类型，这个值的来源很灵活，可以是硬编码的固定值、ViewModel 中的数据，也可以是从父级可组合项传过来的。虽然不一定非要把它存在 <code>State</code> 对象里，但必须注意：当 <code>onValueChange</code> 事件触发时，一定要手动更新这个值。</p>
<p class="maodian"></p><h4>三个核心要点</h4>
<ol><li><strong>mutableStateOf(value)</strong>：会创建一个 <code>MutableState</code> 对象，这是 Compose 里的可观察类型。只要它的值变了，系统就会安排所有读取过这个值的可组合函数进行重组。</li><li><strong>remember</strong>：负责把对象存储在组合中。如果调用 <code>remember</code> 的可组合项从组合中被移除了，那它存储的这个对象也会被忘记。</li><li><strong>rememberSaveable</strong>：比 <code>remember</code> 多了个“持久化”能力——它会把状态存在 <code>Bundle</code> 里，就算应用遇到屏幕旋转这种配置更改，状态也不会丢失。</li></ol>
<blockquote><p>注意：如果想深入了解 Compose 中的状态以及状态提升的相关知识，可以参考专门的“状态和 Jetpack Compose”指南。</p></blockquote>
<p class="maodian"></p><h3>定义可组合项参数</h3>
<p>给可组合项定义状态参数时，别盲目添加，先想清楚两个问题：这个可组合项需要有多高的可重用性和灵活性？这些状态参数会对它的性能产生什么影响？</p>
<p>核心原则是：<strong>为了方便分离逻辑和重复使用，每个可组合项只包含最必要的信息</strong>。举个例子，我们要做一个显示新闻标题的可组合项 <code>Header</code>，两种写法差别很大：</p>
<div class="jb51code"><pre class="brush:java;">@Composable
fun Header(title: String, subtitle: String) {
// 只有 title 或 subtitle 变化时，才会重组
}
@Composable
fun Header(news: News) {
// 只要传入新的 News 实例，不管标题副标题变没变化，都会重组
}</pre></div>
<p>有时候用独立的参数还能提升性能。比如 <code>News</code> 类里除了标题和副标题，还有作者、时间等很多其他信息，这时用 <code>Header(news)</code> 的写法就很不划算——哪怕只有无关信息变了，生成了新的 <code>News</code> 实例，<code>Header</code> 也会无辜重组。</p>
<p>另外还要注意参数数量：如果一个可组合函数的参数太多，使用起来会很麻烦。这种情况下，建议把这些参数整合到一个类里，再传递这个类的对象。</p>
<p class="maodian"></p><h3>Compose 中的事件</h3>
<p>应用里所有用户输入或系统通知，都应该被当作<strong>事件</strong>来处理——比如按钮点击、文本输入变化，甚至是计时器触发、网络请求结果通知等。这些事件触发后，不能由界面层直接修改状态，而是要交给 <code>ViewModel</code> 处理，再由 <code>ViewModel</code> 去更新界面状态。</p>
<p>这里有个重要原则：<strong>界面层绝对不能在事件处理逻辑之外修改状态</strong>，不然很容易导致应用状态混乱，出现各种难以排查的 Bug。</p>
<p class="maodian"></p><h4>传递不可变值的优势</h4>
<p>给状态和事件处理的 lambda 传递参数时，最好用<strong>不可变值</strong>。这么做有四个明显好处：</p>
<ol><li><strong>提升可重用性</strong>：不可变参数让可组合项在不同场景下都能使用。</li><li><strong>防止界面乱改状态</strong>：确保界面只能通过事件回调触发状态更新，不能直接修改状态值。</li><li><strong>避免并发问题</strong>：能保证不会有其他线程偷偷修改这个状态。</li><li><strong>降低代码复杂度</strong>：不可变值的状态变化更可控，代码逻辑更容易理解和维护。</li></ol>
<p class="maodian"></p><h4>通用可组合项示例</h4>
<p>比如应用的顶部导航栏（TopAppBar），通常都要显示文本，还要有个返回按钮。我们可以做一个通用的 <code>MyAppTopAppBar</code> 可组合项，专门接收文本内容和返回按钮的点击事件，这样在整个应用里都能复用：</p>
<div class="jb51code"><pre class="brush:java;">@Composable
fun MyAppTopAppBar(topAppBarText: String, onBackPressed: () -> Unit) {
TopAppBar(
title = {
Text(
text = topAppBarText,
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center)
)
},
navigationIcon = {
IconButton(onClick = onBackPressed) {
Icon(
Icons.Filled.ArrowBack,
contentDescription = localizedString
)
}
},
// ...
)
}</pre></div>
<p class="maodian"></p><h3>ViewModel、状态和事件：示例</h3>
<p>结合 <code>ViewModel</code> 和 <code>mutableStateOf</code>，我们就能在应用中完整实现单向数据流。核心要求有两个：一是界面状态要通过 <code>StateFlow</code> 或 <code>LiveData</code> 这类可观察的状态容器公开；二是 <code>ViewModel</code> 要负责处理来自界面或其他层的事件，并根据事件更新状态容器。</p>
<p class="maodian"></p><h4>登录屏幕的状态与事件建模</h4>
<p>我们以登录屏幕为例，看看具体怎么实现。一个登录屏幕通常有四种状态，而且状态之间是互斥的，用密封类（密封类能限制状态的取值范围，很适合这种场景）建模最合适：</p>
<ol><li>退出登录状态：用户还没登录的时候。</li><li>进行中状态：应用正在发起网络请求，尝试让用户登录的时候（比如显示加载转圈）。</li><li>错误状态：登录过程中出现问题（比如网络错误、账号密码错误）。</li><li>登录成功状态：用户顺利登录后。</li></ol>
<p><code>ViewModel</code> 里会维护一个私有状态 <code>_uiState</code>，再对外提供一个只读的 <code>uiState</code> 供界面访问。同时，<code>ViewModel</code> 还会提供 <code>onSignIn()</code> 这样的方法，专门处理登录事件。代码示例如下：</p>
<div class="jb51code"><pre class="brush:java;">class MyViewModel : ViewModel() {
private val _uiState = mutableStateOf<UiState>(UiState.SignedOut)
val uiState: State<UiState> get() = _uiState
// ...
}</pre></div>
<p class="maodian"></p><h4>其他状态容器的用法</h4>
<p>除了 <code>mutableStateOf</code>，Compose 还为 <code>LiveData</code>、<code>Flow</code>、<code>Observable</code> 这些常用组件提供了扩展，让它们能注册为监听器，把自身的值当作 Compose 状态来使用。比如用 <code>LiveData</code> 的写法：</p>
<div class="jb51code"><pre class="brush:java;">class MyViewModel : ViewModel() {
private val _uiState = MutableLiveData<UiState>(UiState.SignedOut)
val uiState: LiveData<UiState> get() = _uiState
// ...
}
@Composable
fun MyComposable(viewModel: MyViewModel) {
val uiState = viewModel.uiState.observeAsState()
// ...
}</pre></div>
<p>到此这篇关于Android Compose 界面架构 : 基于单向数据流的文章就介绍到这了,更多相关Android Compose 单向数据流内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>Android Compose状态实例详解</li><li>Android Compose学习之绘制速度表盘</li><li>Android Compose实现联系人列表流程</li><li>Android View与Compose互相调用实例探究</li><li>Android数据流之Channel和Flow实现原理和技巧详解</li><li>一文读懂Android Kotlin的数据流</li><li>Android中wifi与数据流量的切换监听详解</li><li>Android中打电话的数据流程分析</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]