搜索栏一行里有固定按钮，也有可伸缩输入框。这个案例重点是别写死宽度。

我建议你读代码时按三个层次走：先看 interface，知道页面需要什么数据；再看 @State，知道哪些地方会变；最后看 build 里的容器嵌套，理解页面怎么搭起来。

搜索栏先分固定和弹性

这个案例对应的是「自适应搜索栏」。如果只是运行一下效果，当然很快；但真要把它改进自己的项目里，最好先把页面分成“数据层、状态层、布局层、交互层”四块。

我比较推荐这种读法：先看interface定义，再看@State，最后看build()里的Column、Row、Flex怎么嵌套。这样不容易被一长串样式绕晕。

数据结构先看这里

这份代码里的核心数据模型是搜索词数据结构。它决定了页面每一项需要哪些字段，比如标题、描述、颜色、状态、价格、数量、角标等。很多 ArkUI 页面写得乱，根源不是布局，而是数据字段没想清楚。

如果你要接真实接口，优先改这一层。接口字段名和页面字段名不一致也没关系，可以在请求完成后做一次映射，别把接口返回结构直接塞进 UI 里。那样短期省事，后面改样式会很难受。

状态变量负责让页面动起来

这个案例里最关键的状态是keyword / isFocus。它不是摆设，页面里的选中、展开、切换、数量变化、输入内容，基本都靠它驱动。

写 HarmonyOS7 ArkUI 页面时，我会刻意把“会变的东西”和“不会变的静态数据”分开。像historyList / hotList这种列表数据负责提供内容，keyword / isFocus负责描述当前用户操作后的界面状态。这样读代码时很清楚：数据从哪里来，界面为什么变。

布局代码怎么读

布局部分不要从第一行样式读到最后一行，这样很累。先找最外层容器，看页面是纵向结构还是横向结构；再看每个区域内部是Row、Column还是Flex。

这个案例的布局重点是：输入框区域伸展，取消和清空按钮固定，这样一行布局不会乱。

如果你调页面时发现内容挤压、对齐不准、间距失控，优先检查这几个地方：固定宽高是不是太多，layoutWeight或Blank是否用对，列表项里长文本有没有设置省略，Flex 换行条件是否满足。

交互逻辑别藏太深

这个页面的交互主线是：聚焦、清空、历史词回填和热搜词点击都会围绕输入框状态展开。

小案例里直接在.onClick()里改状态没问题，读起来也直观。但如果后面业务变复杂，比如要请求接口、弹确认框、写缓存，就别把逻辑全塞在事件回调里。可以拆成一个私有方法，让 UI 代码只表达“点了什么”，具体怎么处理交给方法。

使用时我会怎么改

如果你只是学习布局，直接运行下面代码就行。如果你准备放进项目里，我建议按这个顺序改：先替换数据数组，再调整颜色和字体，最后再改交互逻辑。

还有一个小经验：不要一开始就把所有东西拆成组件。先让页面跑通，等你发现某个卡片、按钮组、列表项重复出现两三次，再抽成@Builder或单独组件。这样代码会更贴近真实需求。

完整代码

/** * Flex flexGrow：自适应宽度的搜索栏 * 知识点：flexGrow 让子项按比例伸展占满剩余空间 */ interface SearchHistoryItem { id: number keyword: string searchTime: string } interface HotItem { rank: number keyword: string hotScore: string isHot: boolean isNew: boolean } @Entry @Component struct AdaptiveSearchPage { @State keyword: string = '' @State isFocused: boolean = false @State showHistory: boolean = true private historyList: SearchHistoryItem[] = [ { id: 1, keyword: 'HarmonyOS 开发', searchTime: '2小时前' }, { id: 2, keyword: 'ArkTS Flex布局', searchTime: '昨天' }, { id: 3, keyword: '鸿蒙应用发布', searchTime: '3天前' }, { id: 4, keyword: 'ArkUI 组件', searchTime: '上周' }, ] private hotList: HotItem[] = [ { rank: 1, keyword: 'HarmonyOS 5.0发布', hotScore: '892万', isHot: true, isNew: false }, { rank: 2, keyword: '鸿蒙生态应用', hotScore: '756万', isHot: true, isNew: false }, { rank: 3, keyword: 'ArkTS 编程指南', hotScore: '623万', isHot: false, isNew: true }, { rank: 4, keyword: '鸿蒙开发者大会', hotScore: '521万', isHot: false, isNew: false }, { rank: 5, keyword: '华为DevEco Studio', hotScore: '489万', isHot: false, isNew: true }, { rank: 6, keyword: '鸿蒙与Android对比', hotScore: '412万', isHot: true, isNew: false }, { rank: 7, keyword: '鸿蒙应用上架教程', hotScore: '387万', isHot: false, isNew: false }, { rank: 8, keyword: 'ArkUI自定义组件', hotScore: '356万', isHot: false, isNew: false }, ] build() { Column() { // ============ 核心演示：Flex flexGrow 搜索栏 ============ // 搜索区域（flexGrow 关键所在） Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 返回按钮（固定宽度，不伸展） Text('←') .fontSize(22) .fontColor('#1A1A1A') .width(36) .textAlign(TextAlign.Center) .flexShrink(0) // 搜索框（flexGrow:1，占满剩余所有宽度） Row({ space: 8 }) { Text('🔍') .fontSize(16) .fontColor('#BBBBBB') TextInput({ placeholder: '搜索鸿蒙相关内容', text: this.keyword }) .layoutWeight(1) .fontSize(15) .backgroundColor(Color.Transparent) .border({ width: 0 }) .onChange((val: string) => { this.keyword = val }) .onFocus(() => { this.isFocused = true }) .onBlur(() => { this.isFocused = false }) if (this.keyword.length > 0) { Text('✕') .fontSize(16) .fontColor('#BBBBBB') .onClick(() => { this.keyword = '' }) } } .layoutWeight(1) // 等价于 flexGrow:1 .height(42) .padding({ left: 12, right: 12 }) .backgroundColor('#F5F5F5') .borderRadius(21) .border({ width: 1.5, color: this.isFocused ? '#007DFF' : Color.Transparent }) .margin({ left: 8, right: 8 }) // 搜索按钮（固定宽度） Text('搜索') .fontSize(15) .fontColor('#007DFF') .fontWeight(FontWeight.Medium) .width(48) .textAlign(TextAlign.End) .flexShrink(0) } .width('100%') .padding({ left: 12, right: 16, top: 14, bottom: 14 }) .backgroundColor('#FFFFFF') // 分割说明 Row() { Text('↑ 搜索框 layoutWeight(1) 即 flexGrow:1，自动占满剩余宽度') .fontSize(12) .fontColor('#999999') .padding(12) } .backgroundColor('#FFF8E8') .border({ width: 1, color: '#FFE8A0' }) .margin({ left: 16, right: 16, top: 8 }) .borderRadius(8) // 历史搜索 if (this.showHistory) { Column({ space: 12 }) { Row() { Text('🕐 搜索历史') .fontSize(15) .fontWeight(FontWeight.Medium) .fontColor('#1A1A1A') Blank() Text('清除') .fontSize(14) .fontColor('#999999') .onClick(() => { this.showHistory = false }) } .width('100%') // 历史标签（Flex Wrap） Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) { ForEach(this.historyList, (h: SearchHistoryItem) => { Row({ space: 6 }) { Text('🕐').fontSize(12).fontColor('#BBBBBB') Text(h.keyword) .fontSize(14) .fontColor('#444444') } .padding({ left: 12, right: 12, top: 7, bottom: 7 }) .backgroundColor('#F5F5F5') .borderRadius(16) .margin({ right: 10, bottom: 8 }) .onClick(() => { this.keyword = h.keyword }) }) } } .padding({ left: 16, right: 16, top: 20 }) .width('100%') } // 热搜榜 Column({ space: 12 }) { Row() { Text('🔥 热搜榜') .fontSize(15) .fontWeight(FontWeight.Medium) .fontColor('#1A1A1A') } .width('100%') ForEach(this.hotList, (hot: HotItem) => { // 每行也是 Flex Row，演示 flexGrow 在列表中的应用 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 排名（固定宽度） Text(hot.rank.toString()) .fontSize(16) .fontWeight(hot.rank <= 3 ? FontWeight.Bold : FontWeight.Normal) .fontColor(hot.rank === 1 ? '#FF4D4D' : hot.rank === 2 ? '#FF8C00' : hot.rank === 3 ? '#FFB800' : '#BBBBBB') .width(28) .textAlign(TextAlign.Center) .flexShrink(0) // 关键词（flexGrow:1，占满中间剩余） Row({ space: 6 }) { Text(hot.keyword) .fontSize(15) .fontColor('#1A1A1A') .layoutWeight(1) if (hot.isHot) { Text('热') .fontSize(10) .fontColor('#FF4D4D') .backgroundColor('#FFF0F0') .padding({ left: 4, right: 4, top: 2, bottom: 2 }) .borderRadius(4) } if (hot.isNew) { Text('新') .fontSize(10) .fontColor('#07C160') .backgroundColor('#EDFAF4') .padding({ left: 4, right: 4, top: 2, bottom: 2 }) .borderRadius(4) } } .layoutWeight(1) .margin({ left: 10 }) // 热度（固定宽度） Text(hot.hotScore) .fontSize(12) .fontColor('#BBBBBB') .width(56) .textAlign(TextAlign.End) .flexShrink(0) } .width('100%') .padding({ top: 12, bottom: 12 }) .border({ width: { bottom: 1 }, color: '#F0F0F0' }) .onClick(() => { this.keyword = hot.keyword }) }) } .padding({ left: 16, right: 16, top: 20 }) .width('100%') } .width('100%') .height('100%') .backgroundColor('#F5F6FA') } }

代码里的几个细节

看完完整代码后，可以回头重点检查三处。

第一处是数据声明。搜索词数据结构这类结构把页面需要的字段提前摆出来，后面ForEach渲染时就不会到处临时拼数据。

第二处是状态更新。keyword / isFocus变化后，相关 UI 会自动刷新，这也是声明式 UI 写起来舒服的地方。你不用手动找某个控件改样式，只要把状态描述清楚。

第三处是容器嵌套。这个案例不是为了炫技才套Row、Column、Flex，而是每一层都在解决具体排版问题。读代码时多问一句：这一层容器负责什么？如果答不上来，它可能就该被简化。

常见改造坑

最容易踩的坑，是把示例里的颜色、文案、尺寸都保留，然后只替换数据。这样页面能跑，但很难和自己的项目风格统一。

另一个坑是过度依赖固定宽高。固定宽高在演示里很方便，在真实设备上就未必稳。文本变长、屏幕变窄、系统字体变大，都会把问题暴露出来。

我一般会保留固定尺寸给图标、头像、按钮这类稳定元素；文本区域、列表区域、内容卡片尽量交给弹性布局处理。

写在最后

这个案例的价值不只是“有一份完整代码”。更重要的是你能从里面看到 ArkUI 页面的一条基本思路：数据先定义清楚，状态单独管理，布局按区域拆，交互只改必要状态。

按这个思路去写，页面复杂一点也不会马上失控。