basic component
Common Components
- Text: display text content
- Image: Show image
- Button: displays a button
- Column: vertical layout
- Row: Horizontal Layout
- List: List
Usage of each component
Text("text component")
.fontColor()
.fontWeight()
.fontSize(20)
Image($r(''))
.objectFit()
.width('100%')
.height(100)
.opacity(191)
Button("buttons").onClick((event) => {
//buttons点击事件
})
Column() {
Text("copies1")
.fontColor()
.fontWeight()
.fontSize(20)
Text("copies2")
.fontColor()
.fontWeight()
.fontSize(20)
Text("copies3")
.fontColor()
.fontWeight()
.fontSize(20)
}.width('100%')
Row() {
Text("copies1")
.fontColor()
.fontWeight()
.fontSize(20)
Text("copies2")
.fontColor()
.fontWeight()
.fontSize(20)
Text("copies3")
.fontColor()
.fontWeight()
.fontSize(20)
}.width('100%')
List() {
ForEach(, (item: string, index) => {
ListItem(){
Text(item).padding(10).width('100%')
}
})
}
Grid
For displaying a list of grids
Grid(){
GridItem(){
Text("item1").padding(10)
}
GridItem(){
Text("item2").padding(10)
}
GridItem(){
Text("item12").padding(10)
}
}.columnsTemplate("1f 1f 1f") //Column distribution rules
.rowsTemplate("1f 1f 1f") //Row distribution rules
Grid's Quad Row/Column Settings
The number of rows/columns occupied by the grid can be realized by passing in GridLayoutOptions when creating the grid
- regularSize, of type [number, number], is used to define the number of rows/columns occupied by the Item of the general rule
- irregularIndexes, of type number[], is used to specify Item indexes that do not follow the general rules.
- onGetIrregularSizeByIndex, callback function of type (index: number) => [number, number], the indexes configured in the irregularIndexes will be called back to this function, and the return result represents the number of rows/columns occupied by this Item, [number of rows occupied, number of columns occupied]
@Preview
@Component
struct GridList {
item: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
layoutOption: GridLayoutOptions = {
regularSize: [1, 1], //generalitemoccupancy1classifier for objects in rows such as words1columns
irregularIndexes: [0, 5], //Non-general ruleitemindexing
onGetIrregularSizeByIndex: (index: number) => {
if (index == 0) {
return [1, 2] //0at the indexitemoccupancy1classifier for objects in rows such as words2columns
} else {
return [2, 1] //5at the indexitemoccupancy2classifier for objects in rows such as words1columns
}
}
}
build() {
Grid(null, ) {
ForEach(, (item: number, index) => {
GridItem() {
Stack() {
Text(item + "").textAlign()
}.width('100%').height(index == 5 ? 105 : 50)
}.backgroundColor()
}, (item: number, index) => {
return item + ""
})
}
.columnsTemplate('1fr 1fr')
.rowsGap(5)
.columnsGap(5)
.width('100%')
.height('100%')
}
}
WaterFlow
waterfalls
WaterFlow() {
FlowItem() {
Text("item1").padding(10)
}
FlowItem() {
Text("item2").padding(10)
}
}
Waterfall quartet row/column settings
Use WaterFlowSections to set up a mixed layout of different columns of the item.
You can set up multiple grouping information in WaterFlowSections, and each grouping information contains the following contents:
● itemsCount Number of items in the grouping
● crossCount number of rows/columns in the waterfall
:: columnsGap/rowsGap: column/row spacing
● margin Outer margins for grouping
@Preview
@Component
struct WaterFlowListView {
items: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@State sections: WaterFlowSections = new WaterFlowSections()
aboutToAppear(): void {
({
itemsCount: 1, //in the subgroupitemquantities
crossCount: 1, //in the subgroup列数
columnsGap: 8, //column spacing
rowsGap: 8, //row spacing
})
({
itemsCount: 8,
crossCount: 2,
columnsGap: 8,
rowsGap: 8,
margin:{
top: 8
}
})
({
itemsCount: 1,
crossCount: 1,
columnsGap: 8,
rowsGap: 8,
margin:{
top: 8
}
})
}
build() {
WaterFlow({ sections: }) {
ForEach(, (item: number, index) => {
FlowItem() {
Stack() {
Text(item + "").textAlign()
}.height(index*10 + 30)
}.backgroundColor().width('100%')
}, (item: number, index) => {
return item + ""
})
}
.width('100%')
.height('100%')
}
}
Page implementation
Prepare data
The first thing you need to do is to prepare the data, including the content of the poem, trivia, and the author.
The content of the json file is as follows:
[
{
"dynasty": "Southern Song Dynasty", "author": "Yue Fei", "author".
"author": "Yue Fei", "introduction": "The first part of this poem is about the first part of a poem, which is about the first part of a poem.
"introduction": "The first part of this lyric runs on the writer's grief and indignation at the fall of the Central Plains into the hands of the enemy, deploring the situation in which his previous achievements have been abandoned, and also expressing his own wish to continue to work hard and strive for success in his prime years. \nThe second part of this lyric runs the pen to express the lyricist's deep hatred for the enemies of the nation, the ardent desire to unify the motherland, and the heartfelt desire to be loyal to the imperial court, i.e., loyal to the motherland." ,
"text": "Angry hair, with the appendage, the dashing rain breaks. \nLift up your eyes, look up to the sky, long whistling, magnificent. \nThirty years of fame and dust and earth, 8,000 miles of clouds and the moon. \Don't wait to see what happens when you're young and have no time for it. \nJingkang shame, not yet snowed. \When will the hatred of the subjects be extinguished? \nDriving a long car, stepping through the lack of Helan Mountain. \I will eat the flesh of the captives and drink the blood of the Huns. \I'm going to start all over again, clean up the old mountains and rivers, and move towards the Heavenly Palace." ,
"textAlign": "center".
"translation": "So angry that his hair stood up, so much so that he topped his hat, climbed high and leaned on the railing, a dashing rain had just stopped. \n\nLooking up and looking around the vast expanse, looking up to the sky, a long whistle sigh, a piece of the heart of the country full of heart. \n\nThirty years has established some fame, but as insignificant as the dust, the north and south of the eight thousand miles of war, after how many stormy life. \n\nDon't waste your years, whiten your teenage black hair, and only regret your grief alone. \n\nThe strange shame of the Jingkang year has not yet been cleared. \n\\nThe indignation of the courtiers, when can it be extinguished. \n\nI want to drive a chariot to attack Helan Mountain, even Helan Mountain will be trampled into the ground. \n\nI'm full of ambition. I'll eat the enemy's meat when I'm hungry for war, and drink the enemy's blood when I'm thirsty for talking and laughing. \n\n I want to start all over again, recover the old rivers and mountains, and make a pilgrimage to the old capital, Beijing." ,
"searchKey": "manjianghong|mjh|mjhxh|song|yuefei|yf"
},
{
"title": "The Song of Water and Songs - When will the bright moon come?", "dynasty": "Northern Song Dynasty": "The Song of Water and Songs - When will the bright moon come?", {
"dynasty": "Northern Song Dynasty", "author": "Su Shi Shi", "drive non-stop as fast as one can
"author": "su shi", "introduction": "word".
"introduction": "The small preface before the words explains the process of writing the words: "In the mid-autumn festival of the Bichen year, I was drunk for the first time. I wrote this piece, and also remembered Ziyu." Su Shi, because of his political differences with Wang Anshi and others who were in power to change the law, asked for his own exile, and moved from place to place as an official. He once asked to be transferred to an official position closer to Su Zhe in order to have more meetings with his brother. In 1074 AD (the seventh year of Xining), Su Shi was sent to Mizhou. After arriving at Mizhou, this wish could not be realized. In the Mid-Autumn Festival of 1076 AD, the moon was shining in the sky, and there was a silver glow all over the place, after the lyricist and his brother Su Zhe were separated, they hadn't been reunited for seven years. At this moment, the lyricist faced a round of bright moon, his heart fluctuates, so he took the wine in full swing, and waved his pen to write this famous piece." ,
"text": "In the Mid-Autumn Festival of the year C.C., I was drinking happily till dawn, and I was very drunk, so I wrote this piece, and I also remembered Ziyu. \n\nWhen is the bright moon? I'm going to drink and ask the blue sky. I don't know what year it is in the sky. I want to go home by the wind, but I'm afraid that the jeweled buildings are too high to be cold. I want to go back by the wind, but I am afraid that the jeweled buildings will be too cold for me. \I want to go back by the wind, but I am afraid that the agitated buildings and jade houses are too high to be cold. There should not be hate, why is it always round when we part? People have sadness and happiness, the moon has a sunny day and the moon is full, this matter can not be complete. But I wish that people would stay together for a long time, and that they would be together for a thousand miles." ,
"textAlign": "left", "translation".
"translation": "On the Mid-Autumn Festival in the year of the Cthulhu, I happily drank until the next morning, got drunk, and wrote this lyric while thinking of my younger brother Su Zhe. When did the \n\n bright moon start to appear? I raised my glass of wine and asked the sky from afar. I don't know what year and month in the palace in the sky. I want to ride the breeze back to the sky, but I am afraid that the buildings made of beautiful jade can not withstand the cold that towers in the nine heavens. Dancing and enjoying the clear shadow of the moon, which is like on earth. \n\nThe moon turned over the vermillion colored pavilion, hanging low on the carved windows, shining on oneself without sleep. The moon shouldn't have any grudges against people, right? Why is it round only when people are parting? People have sad and happy changes, the moon has the transformation of cloudy and round, this kind of thing since ancient times is difficult to complete. I just hope that everyone in this world's loved ones can be safe and healthy, even if they are thousands of miles apart, they can still share this beautiful moonlight." ,
"rectify": {
"High Touch": "High Touch"
},
"searchKey": "shuidiaogetou|mingyuejishiyou|sdgt|myjsy|song|sushi|ss"
},
{
"title": "Denggao", "dynasty": "Denggao", {
"dynasty": "Tang", "author": "Du Fu", "Du Fu (712-770), great Tang dynasty poet
"author": "Du Fu", "introduction": "Poetry".
"introduction": "This poem was written in the fall of 767 A.D. (the second year of the Tang Dynasty Emperor Dali) when Du Fu was in Kui Zhou. It was written when he was fifty-six years old. One day he climbed up to the high platform outside the city of Baidi in Kui Prefecture alone, and the view of the desolate autumn river triggered his feelings of being a drifter and seeped into the sadness of his old age and illness. As a result, he wrote the song "Ascending to a High Plateau," which is regarded as "the crown of the seven rhymes." ,
"text": "The wind and the sky are high and the apes are sad, the islets are clear and the sand is white and the birds are flying back; \n the boundless fallen trees are under the Xiao Xiao, the endless Yangtze River is rolling. \n Ten thousand miles of sadness and autumn often as a guest, a hundred years of sickness alone on the stage; \n hardship and bitter hatred of the frosty sideburns, scribbling new stop turbid wine cup." ,
"textAlign": "center", "textAlign": "center", "textAlign": "center", "translation".
"translation": "The windy sky high apes and monkeys cry looks very sad, the water is clear and sandy river island there are birds circling. \n The boundless trees are rustling down fallen leaves, and the Yangtze River is rolling and rushing. \n Sorrowful to the autumn scenery lamented ten thousand miles drifting often as a guest, the disease in the life of the body today alone on the high platform. \nThroughout the hardship and bitterness of hate white hair grows all over the temples, decay full of heart but also suspended to pour the cup of sorrow." ,
"searchKey": "denggao|dg|tang|dufu|dg"
},
......
]
[
{
"title": "The Eight Greats of the Tang and Song Dynasties".
"text": "The Eight Greats of the Tang and Song Dynasties, also known as the Eight Greats of Tang and Song Prose, is the collective name of eight prose writers of the Tang and Song Dynasties, namely Han Yu and Liu Zongyuan of the Tang Dynasty, and Ouyang Xiu, Su Xun, Su Shi, Su Zhe, Wang Anshi and Zeng Gong of the Song Dynasty. \n which Han Yu, Liu Zongyuan is the leader of the Tang Dynasty ancient literature movement, Ouyang Xiu, three Su (Su Shi, Su Rut, Su Xun) and other four people is the core of the Song Dynasty ancient literature movement, Wang Anshi, Zeng Gong is the representative of Linchuan literature. They successively set off a new wave of ancient literature reform, so that the stale face of the development of poetry and literature was refreshed. \n Eight in the Su family, father and son of three brothers, known as the "three Su", respectively, Su Xun, Su Shi, Su Zhe, and "a door of three bachelors" reputation. Therefore, it can be summarized as "Han Liu Ou Wang Zeng three Su"."
}, {
{
"title": "Drunken Eight Immortals", "text": "Drunken Eight Immortals", {
In the New Book of the Tang Dynasty (New Tang Dynasty (618-907)-Biography of Li Bai (701-762), Tang Dynasty poet), Li Bai, He Zhizhang, Li Shizhi, last night's King of Ruyang, Cui Zongzhi, Su Jin, Zhang Xu, and Jiao Sui were known as the "Eight Immortals of Drinking". Du Fu has the "Eight Immortals in Drinking Song". Porcelain picture painted drinking in the eight immortals, often in the characters on the book to the name of the person, to the Qing Dynasty for the most common. \n a fairy He Zhizhang: Zhizhang horseback riding like a boat, eye flower under the well sleep. \nTwo Immortals Ruyang Wang: Ruyang three buckets began to sky, Road meet Koji car mouth salivation, hate not to move the seal to the wine spring. \nThree Immortals Li Shizhi: the left minister of the day to spend ten thousand dollars, drink like a whale sucking a hundred rivers, cups of music and saint said to avoid the wise. \nFourth Immortal Cui Zongzhi: Zongzhi is a dashing young man, lifting a goblet and looking at the blue sky, bright as a jade tree in front of the wind. \nFifth Immortal Su Jin: Su Jin's long fasting in front of the embroidered Buddha, often love to escape from Zen in drunkenness. \n Six Immortals Li Bai: Li Bai a bucket of poetry a hundred pieces, Chang'an city wine sleep. He called the Son of Heaven, and claimed to be an immortal in wine. \nSeven Immortals Zhang Xu: Zhang Xu three cups of grass saint passes on, take off his hat and show the top of the king before, waving the pen down the paper like a cloud of smoke. \n Eight Immortals Jiao Sui: Jiao Sui five buckets square Zhuo Ran, talk about eloquent defense shocked four feasts."
},
......
]
[
{
"name": "su shi",
"dynasty": "Northern Song Dynasty".
"introduction": "Su Shi (1037-1101), the character Zizhan, also known as Hezhong, number Tieguan Daoren, Dongpo Jushi, world known as Su Dongpo, Su Xian, Po Xian. He was a native of Meishan, Meizhou (present-day Meishan City, Sichuan Province), a literary scholar, calligrapher and painter of the Northern Song Dynasty, and a celebrity in historical water management. With his father Su Xun, brother Su Zhe three people and called "three Su". \In the second year of Jiayou's reign (1057), he won the B Section in the Imperial Examination, and was awarded the title of Jinshe and the first degree (one said that he was awarded the title of Jinshe). In the sixth year of Jiayou (1061), he took part in the examination for the system of science, and was authorized to be the assessor of Dali and the judge of Fengxiang Province. During the reign of Emperor Shenzong of Song Dynasty, he served in Hangzhou, Mizhou, Xuzhou and Huzhou. In the third year of Yuanfeng (1080), because of the "Wutai Poetry Case", he was relegated to the position of deputy envoy of the Huangzhou regiment. After the accession of Emperor Zhezong of Song Dynasty, he was appointed as the Minister of Military Affairs and the Minister of Rites, and was sent out to govern Hangzhou, Yingzhou, Yangzhou, Dingzhou and other places. With the new party in power, he was deported to Huizhou and Danzhou. During the reign of Emperor Huizong of the Song Dynasty, he was pardoned and returned to the north, where he died of illness in Changzhou. In the Southern Song Dynasty, he was posthumously awarded the title of "Wenzong" (office accommodation). \n Su Shi was the leader of the literary world in the middle of the Northern Song Dynasty, with high achievements in poetry, lyrics, literature, calligraphy and painting. His poems are broad in subject matter, fresh and robust, making good use of hyperbole and metaphor, with a unique style, and Huang Tingjian, also known as "Su Huang"; his words open up a school of boldness and freedom, and Xin Qiji, also a representative of the school of boldness and freedom, also known as "Su Xin"; his writings are rich, wanton and unrestrained, with Ouyang Xiu, also known as "Ouyang Xiu," and "Ouyang Xiu". Ouyang Xiu, together with Han Yu, Liu Zongyuan, Ouyang Xiu, Su Xun, Su Zhe, Wang Anshi, and Zeng Gong, known as the "Eight Great Masters of the Tang and Song Dynasties"; good at calligraphy, together with Huang Tingjian, Mi Fu, and Cai Xiang, known as the "Four Song Masters"; good at literati painting. "He was good at calligraphy, and together with Huang Tingjian, Mi Fu and Cai Xiang, he was known as the Four Song Masters. His works include "The Seven Collections of Dongpo", "Dongpo Yi Zhuan", "Dongpo Lefu", "Cold Food Post", "Xiaoxiang Bamboo and Stone Drawing", and "Withered Trees and Strange Stones Drawing", etc."
}, {
{
"name": "Du Fu".
"dynasty": "Tang".
"introduction": "Du Fu (February 12, 712 - 770), courtesy name Zimei (Zimei, capital of Ghana), self-proclaimed Shaoling Yolao (少陵野老), with an ancestral home in Xiangyang (present-day Hubei Province), moved to Gongxian County (present-day southwestern Henan Province, Gongyi) from the time of his great-grandfather. He was a famous realist poet of the Tang Dynasty. Together with Li Bai, he was known as "Li Du" and "Li Du", and was also often called "Old Du". \n Du Fu was an educated and knowledgeable poet with political aspirations since his childhood. In the late Kaiyuan period of Emperor Xuanzong of the Tang Dynasty, Du Fu failed to pass the entrance examination and traveled around the world. After living in Chang'an for nearly ten years, he was unable to show his talents and lived in poverty, and gradually gained a deeper understanding of the social conditions at that time. Later, he was granted a small official position by offering gifts. After the outbreak of the An Shi Rebellion and the fall of Chang'an, he was trapped in the city for half a year, and then fled to Fengxiang, where he was worshiped by Emperor Suzong of the Tang Dynasty as the left picker, and was known as "Du Picker". After the recapture of Chang'an, he returned to the capital with Emperor Suzong, and then was sent out as a military officer of Huazhou. During this period, Du composed "Ascending High", "Spring Hope", "Northern Expedition", and "Three Officials" and "Three Farewells", etc. He abandoned his post and moved to Chengdu. Later, he abandoned his post and moved to Chengdu, where he once served as a counselor in the office of Yan Wu, the governor of Jiannan, and was authorized to serve as an inspector of the Ministry of Public Works, and was therefore known as "Du Gongbu". In his later years, Du Fu took his family out of Sichuan and died in the winter of 770 in the fifth year of the Dali calendar at the age of fifty-nine. \n Du Fu was good at utilizing various poetic forms, especially at metrical poems, with a variety of styles, but with a predominance of somberness; his language was refined and highly expressive. Inheriting and developing the fine literary tradition of reflecting social reality since the Book of Poetry, Du Fu became another peak in the development of ancient Chinese poetry, and was recognized by later generations as the "mastermind" in the history of poetry. His personality is also regarded as a model of Chinese literati character. Since the late Tang and Song dynasties, Du Fu's reputation has spread far and wide, and he has had a profound influence on both Chinese and Japanese literature. Later generations honored him as the "Sage of Poetry" and called his poems the "History of Poetry". Most of his works are collected in "Du Gongbu ji" (The Collected Works of Du Gongbu)."
}, {
{
"name": "Yue Fei".
"dynasty": "Southern Song Dynasty", "introduction": "Yue Fei".
"introduction": "Yue Fei (March 24, 1103 - January 27, 1142), courtesy name Pengju, was a native of Tangyin (present-day Tangyin, Henan Province), Xiangzhou, Song Dynasty, with an ancestral home in Dongchang (present-day Liaocheng, Shandong Province), and was a renowned general of the Southern Song Dynasty who fought against the Jin Dynasty, a militarist, a strategist, a national hero, a calligrapher, and a poet, and was ranked as one of the "Four Zhongxing Generals" of the Southern Song Dynasty. "Yue Fei was a famous general in the Southern Song Dynasty who fought against the Jin Dynasty, was a military strategist, national hero, calligrapher and poet. \n Yue Fei from the age of twenty, had four times from the army. Since Jianyan two years (1128) met Zongze to Shaoxing eleven years (1141), has participated in, commanded hundreds of large and small battles. When the Jin army attacked the south of the Yangtze River, he stood alone, and strongly resisted the Jin and recovered Jiankang. Shaoxing four years (1134), recovered six counties in Xiangyang. In the sixth year of Shaoxing (1136), he led his division in the northern expedition and successfully captured Shangzhou and Guozhou. Shaoxing ten years (1140), Wanyan Zongbi destroyed the alliance to attack the Song Dynasty, Yue Fei wielded the division of the northern expedition, the people of the two rivers, the local volunteers have responded to the attack on the Jin army. Yue's army successively recovered Zhengzhou and Luoyang, defeated the Jin army in Placebo and Yingchang, and marched to Zhuxianzhen. Song Gaozong Zhao Jiu and Chancellor Qin Hui, however, were determined to seek peace, with twelve "Golden Cards" urging the troops to return to their divisions. In the process of negotiating peace between Song and Jin, Yue Fei was framed and im*ed by Qin Hui and Zhang Jun. In January 1142, he was killed together with his eldest son, Yue Yun, and his general, Zhang Xian, on trumped-up charges. Song Xiaozong, vindicated, reburied in the West Lake Qixia Ridge, posthumous title Wu Mu, and later posthumous title Zhongwu, sealed E Wang. \n Yue Fei is an outstanding commander of the Southern Song Dynasty, he attached importance to the people's resistance to the Jin Dynasty, created the "linking the river and the Shuo" plan, advocating that the civilian resistance to the Jin Dynasty north of the Yellow River and the Song Dynasty army to cooperate with each other, in order to recover the lost territory; clear-cut rewards and punishments for the military, strict discipline, and sympathetic to his subordinates, leading by example, led by the "Yuejia Army" known as the "Yuejia Army". Yuejia Army, led by the "Yuejia Army", known as "freezing to death, not demolish the house, starving to death, not looting. The Jin army has "easy to shake the mountain, shake the Yuejia army difficult" comment, to show the sincere admiration for the Yuejia army. \Yue Fei's literary talent was also outstanding, and his masterpiece "Man Jiang Hong - Raging Hair" is a patriotic masterpiece that has been recited throughout the ages, and later generations have compiled an anthology of his writings for posterity."
},
......
}
commander-in-chief (military)jsonThe file is placed in the resource directory resources/rawfile/ downloading
Imported via import when used
import poetryList from 'resources/rawfile/';
import tips from 'resources/rawfile/';
Define data entity class based on json data format
export interface Poetry {
uuid?: string
title: string
dynasty: string
author: string
introduction: string
text: string
textAlign: string
translation: string
rectify?: object
searchKey: string
}
export class Tip {
uuid: string
title: string
text: string
}
Home Page Realization
Home page effect
The content of the home page consists of a random list of trivia and poems, so we can use List, Grid, WaterFlow components to realize the list display, here we take WaterFlow as an example.
Trivia Layout
@Component
export struct TipView {
@Prop tip: Tip
viewHeight: number = 152
textFontSize: number = 19
textController: TextController = new TextController();
applyTextStyle() {
let style = (, * 2)
(style)
}
build() {
Stack({
alignContent:
}) {
Image($r('.tip_banner'))
.objectFit()
.width('100%')
.height()
.opacity(191)
Column() {
Text()
.fontSize(20)
.fontWeight()
Text(undefined, { controller: })
.fontSize()
.lineHeight(26)
.maxLines(4)
.textOverflow({
overflow:
})
.margin({ top: 5 })
.width("100%")
.onAppear(() => {
()
})
}
.alignItems()
.padding({
top: 10,
bottom: 10,
left: 12,
right: 12
})
.width('100%')
.constraintSize({ maxHeight: })
.backgroundColor()
}
.clip(true)
.borderRadius(10)
}
}
The content of the trivia involves multiple paragraphs, in order to read easily, the paragraphs need to be indented by 2 Chinese characters at the beginning, HarmonyOS provides ParagraphStyle class to set the paragraph style.
export class TextStyleUtils {
static buildParagraphIndentStyle(text: string, offset: number): MutableStyledString {
let paragraphStyle: ParagraphStyle = new ParagraphStyle({ textIndent: (offset) });
let regArray = (/\n/g)
let styleArray: Array<StyleOptions> = []
({
start: 0,
length: 3,
styledKey: StyledStringKey.PARAGRAPH_STYLE,
styledValue: paragraphStyle
})
for (let match of regArray) {
({
start: ,
length: 3,
styledKey: StyledStringKey.PARAGRAPH_STYLE,
styledValue: paragraphStyle
})
}
return new MutableStyledString(text, styleArray)
}
}
Poetry list item layout
@Component
struct DataItemView {
@Prop item: Poetry
build() {
Column() {
Text()
.fontColor()
.fontWeight()
.fontSize(20)
Text(`[${}]${}`)
.fontColor()
.fontSize(16)
.margin({ top: 2 })
Text()
.fontColor()
.fontSize(16)
.margin({ top: 5 })
.maxLines(3)
.textOverflow({
overflow:
})
}
.alignItems()
.padding(10)
}
}
Waterfall List
The first item of the list is the trivia layout, which needs to be displayed in quartic 2 columns, so the list items are grouped as follows:
- Trivia layout, quantity 1, display 1 column
- Poetry item layout, number is the number of poems list, display 2 columns
- White space at the bottom, quantity 1, show 1 column
@Component
struct WaterFlowView {
@Prop tip: Tip
@Prop poetryList: LazyDataSource<Poetry>
@State sections: WaterFlowSections = new WaterFlowSections()
aboutToAppear(): void {
({
itemsCount: 1,
crossCount: 1,
})
({
itemsCount: (),
crossCount: 2,
columnsGap: 8,
rowsGap: 8,
})
({
itemsCount: 1,
crossCount: 1,
})
}
build() {
WaterFlow({ sections: , layoutMode: WaterFlowLayoutMode.SLIDING_WINDOW }) {
FlowItem() {
TipView({
tip: ,
})
}
.padding({ top: 8, bottom: 8 })
.onClick(() => {
})
LazyForEach(,
(item: Poetry, index) => {
FlowItem() {
DataItemView({
item: item
})
}
.width('100%')
.borderRadius(10)
.backgroundColor()
.onClick(() => {
})
},
(item: Poetry, index) => {
return
}
)
FlowItem() {
Text().height(8).width('100%')
}
}
.width('100%')
.height('100%')
.padding({ left: 8, right: 8 })
}
Detail page implementation
Detail page effect
The body part of the poem can be displayed centered or left according to the content, and the [Introduction] part also requires paragraph indentation (refer to Trivia Layout). Details page layout is relatively simple, not in detail.
The technical design and implementation of this paper are based on the author's work experience, if there is any error, please leave a message to correct, thank you.