List 創(chuàng)建列表 列表形式顯示
官方文檔：創(chuàng)建列表（List）
關(guān)鍵代碼
- List(){} 列表控件
- ListItem() {} 子元素
例如
1、簡(jiǎn)單使用代碼 List(){}
List() {
ListItem() {
Row() {
Image($r('app.media.iconE'))
.width(40)
.height(40)
.margin(10)
Text('小明')
.fontSize(20)
}
}
ListItem() {
Row() {
Image($r('app.media.iconF'))
.width(40)
.height(40)
.margin(10)
Text('小紅')
.fontSize(20)
}
}
}
2、迭代列表內(nèi)容 ForEach
import util from '@ohos.util';
class Contact {
key: string = util.generateRandomUUID(true);
name: string;
icon: Resource;
constructor(name: string, icon: Resource) {
this.name = name;
this.icon = icon;
}
}
@Entry
@Component
struct SimpleContacts {
private contacts = [
new Contact('小明', $r("app.media.iconA")),
new Contact('小紅', $r("app.media.iconB")),
...
]
build() {
List() {
ForEach(this.contacts, (item: Contact) => {
ListItem() {
Row() {
Image(item.icon)
.width(40)
.height(40)
.margin(10)
Text(item.name).fontSize(20)
}
.width('100%')
.justifyContent(FlexAlign.Start)
}
}, item => item.key)
}
.width('100%')
}
}
3、列表方向 listDirection
關(guān)鍵代碼:listDirection(Axis.Horizontal)
- 默認(rèn)豎直方向 Axis.Vertical
List() {
...
}
.listDirection(Axis.Horizontal) //列表水平方向
4、設(shè)置內(nèi)容間距 space
List({ space: 10 }) {
...
}
5、分隔符的設(shè)置 divider
List() {
...
}
.divider({
strokeWidth: 1,
startMargin: 60,
endMargin: 10,
color: '#ffe9f0f0'
})
-
- 分隔線的寬度會(huì)使ListItem之間存在一定間隔，當(dāng)List設(shè)置的內(nèi)容間距小于分隔線寬度時(shí)，ListItem之間的間隔會(huì)使用分隔線的寬度。
-
- 當(dāng)List存在多列時(shí)，分割線的startMargin和endMargin作用于每一列上。
-
- List組件的分隔線畫在兩個(gè)ListItem之間，第一個(gè)ListItem上方和最后一個(gè)ListItem下方不會(huì)繪制分隔線。
6、滾動(dòng)條的設(shè)置 scrollBar（）
- BarState.on 打開
- BarState.Off 關(guān)閉
- BarState.Auto 自動(dòng) （滾動(dòng)時(shí)顯示，2秒后隱藏）
List() {
...
}
.scrollBar(BarState.Auto)
7、支持分組列表 itemHead
@Component
struct ContactsList {
...
@Builder itemHead(text: string) {
// 列表分組的頭部組件，對(duì)應(yīng)聯(lián)系人分組A、B等位置的組件
Text(text)
.fontSize(20)
.backgroundColor('#fff1f3f5')
.width('100%')
.padding(5)
}
build() {
List() {
ListItemGroup({ header: this.itemHead('A') }) {
// 循環(huán)渲染分組A的ListItem
...
}
...
ListItemGroup({ header: this.itemHead('B') }) {
// 循環(huán)渲染分組B的ListItem
...
}
...
}
}
}
8、添加粘性標(biāo)題 .sticky(StickyStyle.Header)
- 如果需要支持吸底效果，可以通過(guò)footer參數(shù)初始化ListItemGroup的底部組件，并將sticky屬性設(shè)置為StickyStyle.Footer
@Component
struct ContactsList {
// 定義分組聯(lián)系人數(shù)據(jù)集合contactsGroups數(shù)組
...
@Builder itemHead(text: string) {
// 列表分組的頭部組件，對(duì)應(yīng)聯(lián)系人分組A、B等位置的組件
Text(text)
.fontSize(20)
.backgroundColor('#fff1f3f5')
.width('100%')
.padding(5)
}
build() {
List() {
// 循環(huán)渲染ListItemGroup，contactsGroups為多個(gè)分組聯(lián)系人contacts和標(biāo)題title的數(shù)據(jù)集合
ForEach(this.contactsGroups, item => {
ListItemGroup({ header: this.itemHead(item.title) }) {
// 循環(huán)渲染ListItem
ForEach(item.contacts, (contact) => {
ListItem() {
...
}
}, item => item.key)
}
...
})
}
.sticky(StickyStyle.Header) // 設(shè)置吸頂，實(shí)現(xiàn)粘性標(biāo)題效果
}
}
9、list快速返回列表頂部
1） 首先，需要?jiǎng)?chuàng)建一個(gè)Scroller的對(duì)象listScroller
private listScroller: Scroller = new Scroller();
2）然后，通過(guò)將listScroller用于初始化List組件的scroller參數(shù)，完成listScroller與列表的綁定。在需要跳轉(zhuǎn)的位置指定scrollToIndex的參數(shù)為0，表示返回列表頂部。
Stack({ alignContent: Alignment.BottomEnd }) {
// 將listScroller用于初始化List組件的scroller參數(shù)，完成listScroller與列表的綁定。
List({ space: 20, scroller: this.listScroller }) {
...
}
...
Button() {
...
}
.onClick(() => {
// 點(diǎn)擊按鈕時(shí)，指定跳轉(zhuǎn)位置，返回列表頂部
this.listScroller.scrollToIndex(0)
})
...
}
10、響應(yīng)滾動(dòng)位置 AlphabetIndexer
...
const alphabets = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
@Entry
@Component
struct ContactsList {
@State selectedIndex: number = 0;
private listScroller: Scroller = new Scroller();
...
build() {
Stack({ alignContent: Alignment.End }) {
List({ scroller: this.listScroller }) {
...
}
.onScrollIndex((firstIndex: number) => {
this.selectedIndex = firstIndex
// 根據(jù)列表滾動(dòng)到的索引值，重新計(jì)算對(duì)應(yīng)聯(lián)系人索引欄的位置this.selectedIndex
...
})
...
// 字母表索引組件
AlphabetIndexer({ arrayValue: alphabets, selected: 0 })
.selected(this.selectedIndex)
...
}
}
}
11、list 響應(yīng)列表項(xiàng)側(cè)滑
@Entry
@Component
struct MessageList {
@State messages: object[] = [
// 初始化消息列表數(shù)據(jù)
...
];
@Builder itemEnd(index: number) {
// 側(cè)滑后尾端出現(xiàn)的組件
Button({ type: ButtonType.Circle }) {
Image($r('app.media.ic_public_delete_filled'))
.width(20)
.height(20)
}
.onClick(() => {
this.messages.splice(index, 1);
})
...
}
build() {
...
List() {
ForEach(this.messages, (item, index) => {
ListItem() {
...
}
.swipeAction({ end: this.itemEnd.bind(this, index) }) // 設(shè)置側(cè)滑屬性
}, item => item.id.toString())
}
...
}
}
12、list 懶加載 LazyForEach cachedCount
原因：
當(dāng)數(shù)據(jù)量多的時(shí)候，為了減少內(nèi)存，一般用懶加載緩存，顯示屏幕內(nèi)容，和渲染一定數(shù)量的緩存，當(dāng)滑動(dòng)的時(shí)候再加載沒(méi)有渲染的內(nèi)容，釋放緩存外的內(nèi)容，達(dá)到釋放緩存的目的
目的：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-788039.html
- cachedCount的增加會(huì)增大UI的CPU、內(nèi)存開銷。使用時(shí)需要根據(jù)實(shí)際情況，綜合性能和用戶體驗(yàn)進(jìn)行調(diào)整。
- 列表使用數(shù)據(jù)懶加載時(shí)，除了顯示區(qū)域的列表項(xiàng)和前后緩存的列表項(xiàng)，其他列表項(xiàng)會(huì)被銷毀。
關(guān)鍵代碼：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-788039.html
- LazyForEach
- .cachedCount(3)
List() {
LazyForEach(this.dataSource, item => {
ListItem() {
...
}
})
}.cachedCount(3)
到了這里，關(guān)于HarmonyOS應(yīng)用開發(fā)學(xué)習(xí)筆記 UI布局學(xué)習(xí) List(){}創(chuàng)建列表 列表形式顯示 簡(jiǎn)單使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
