HarmonyOS鸿蒙Next中List组件、Tabs组件都必须设置高度吗，如何让他们自适应高度？
HarmonyOS鸿蒙Next中List组件、Tabs组件都必须设置高度吗，如何让他们自适应高度？
代码如下，不给List组件设置高度的话，就会撑满屏幕，
如果只给List组件设置高度，那么Tabs组件也会默认撑满屏幕，
请问有什么解决办法吗？
```typescript
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TestPage {
// 龙虎榜tab栏的索引
[@State](/user/State) DragonTigerIndex: number = 0
// 龙虎榜tab栏控制器
private DragonTigerTabController: TabsController = new TabsController()
build() {
Column {
List {
ListItem {
Row {
ForEach(['龙虎榜个股', '机构买卖'], (item: string, index: number) => {
Column {
Text(item)
.backgroundColor('#f391a9')
.height(30)
.fontSize(this.DragonTigerIndex === index ? 15 : 13)
.fontColor(Color.Black)
.textAlign(TextAlign.Center)
.fontWeight(this.DragonTigerIndex === index ? FontWeight.Bold : FontWeight.Regular)
.onClick(() => {
this.DragonTigerTabController.changeIndex(index)
})
}.layoutWeight(1)
}, (item: string) => JSON.stringify(item))
}.backgroundColor('#f391a9')
}
}
.listDirection(Axis.Horizontal)
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)
Tabs({ controller: this.DragonTigerTabController }) {
TabContent {
DragonTigerStockTab()
}.backgroundColor('#857')
TabContent {
DragonTigerAgenciesTab()
}.backgroundColor('#f50')
}
.barWidth(0)
.barHeight(0)
.edgeEffect(EdgeEffect.None) // 滑倒两边的TabContent，不可继续外滑
.animationDuration(0) //滑动切换效果
.onChange(index => {
this.DragonTigerIndex = index // 在swiper改变的时候,让上方的tab栏也改变
})
}
}
}
[@Component](/user/Component)
export struct DragonTigerAgenciesTab {
build() {
Column {
Text('第二个页面')
}.backgroundColor('#f50')
}
}
[@Component](/user/Component)
export struct DragonTigerStockTab {
build() {
Column {
Text('第一个页面 ')
}.backgroundColor('857')
}
}
更多关于HarmonyOS鸿蒙Next中List组件、Tabs组件都必须设置高度吗，如何让他们自适应高度？的实战教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
看到个帖子说用swiper代替，确实可以
但是有个新问题，swiper点击list切换子页面或者滑动swiper切换子页面时，
对应的顶部标签，渲染的延迟有些高啊！
页面都滑到第二页了，过了一秒钟左右，顶部标题的字体才加粗！
更多关于HarmonyOS鸿蒙Next中List组件、Tabs组件都必须设置高度吗，如何让他们自适应高度？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
现在给list组件一个40的高度，不给tabs组件设置高度，给它的两个子组件都设置高度，
但是tabs还是撑满的屏幕高度，代码如下
@Entry
@Component
struct TestPage {
// 龙虎榜tab栏的索引
@State DragonTigerIndex: number = 0
// 龙虎榜tab栏控制器
private DragonTigerTabController: TabsController = new TabsController()
build() {
Column() {
List() {
ListItem() {
Row() {
ForEach(['龙虎榜个股', '机构买卖'], (item: string, index: number) => {
Column() {
Text(item)
.backgroundColor('#f391a9')
.height('100%')
.fontSize(this.DragonTigerIndex === index ? 15 : 13)
.fontColor(Color.Black)
.textAlign(TextAlign.Center)
.fontWeight(this.DragonTigerIndex === index ? FontWeight.Bold : FontWeight.Regular)
.onClick(() => {
this.DragonTigerTabController.changeIndex(index)
})
}.layoutWeight(1)
}, (item: string) => JSON.stringify(item))
}.backgroundColor('#f391a9')
}
}
.height(40)
.listDirection(Axis.Horizontal)
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)
Tabs({ controller: this.DragonTigerTabController }) {
TabContent() {
DragonTigerStockTab()
}.backgroundColor('#857')
TabContent() {
DragonTigerAgenciesTab()
}.backgroundColor('#f50')
}
.barWidth(0)
.barHeight(0)
// .height(100)
.edgeEffect(EdgeEffect.None) // 滑倒两边的TabContent，不可继续外滑
.animationDuration(0) //滑动切换效果
.onChange(index => {
this.DragonTigerIndex = index // 在swiper改变的时候,让上方的tab栏也改变
})
}
}
}
@Component
export struct DragonTigerAgenciesTab {
build() {
Column() {
Text('第二个页面')
}.backgroundColor('#555').height(100)
}
}
@Component
export struct DragonTigerStockTab {
build() {
Column() {
Text('第一个页面 ')
}.backgroundColor('#aa2').height(100)
}
}
