《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識(shí)點(diǎn)2-4 開發(fā)數(shù)據(jù)展示頁

開發(fā)數(shù)據(jù)展示頁010203彈性布局Flex層疊布局容器Stack進(jìn)度條組件Progress04滑動(dòng)條組件Slider彈性布局Flex彈性布局Flex可以靈活的實(shí)現(xiàn)線性布局Row和Column的設(shè)置效果，F(xiàn)lex的排列方向和對(duì)齊格式是在參數(shù)中設(shè)置的。參數(shù)direction的值決定Flex的排列方向。彈性布局Flex參數(shù)justfyContent的值決定主軸的對(duì)齊格式。參數(shù)alignItems的值決定交叉軸的對(duì)齊格式。層疊布局容器Stack層疊布局容器組件Stack，是把子組件按照設(shè)置的對(duì)齊格式順序依次堆疊，后一個(gè)子組件覆蓋在前一個(gè)子組件上邊。子組件的對(duì)齊方式使用alignContent參數(shù)來設(shè)置。進(jìn)度條組件ProgressProgress進(jìn)度條，用于顯示內(nèi)容加載或操作處理等進(jìn)度。不同類型的進(jìn)度條Progress參數(shù)：value：指定當(dāng)前進(jìn)度值（必填）total：指定進(jìn)度總長(zhǎng)，默認(rèn)值100.（選填）type：指定進(jìn)度條類型，默認(rèn)值ProgressType.Linear（選填）Progress常用屬性color：進(jìn)度條的顏色，默認(rèn)為藍(lán)色style：進(jìn)度條的樣式，樣式內(nèi)的可選設(shè)置有strokeWidth：設(shè)置進(jìn)度條寬度scaleCount：設(shè)置環(huán)形進(jìn)度條總刻度scaleWidth：設(shè)置環(huán)形進(jìn)度條刻度粗細(xì)value：當(dāng)前進(jìn)度，會(huì)覆蓋參數(shù)的當(dāng)前進(jìn)度進(jìn)度條組件ProgressProgress({

value:

85,

//參數(shù)1：必選,當(dāng)前進(jìn)度

total:100,

//參數(shù)2：可選,最大進(jìn)度,默認(rèn)100

type:

ProgressType.ScaleRing

//參數(shù)3：可選,進(jìn)度條類型})

.size({width:

80,

height:

80})

.color(Color.Pink)

//屬性1：進(jìn)度條的顏色,默認(rèn)為藍(lán)色

.style({

//屬性2：設(shè)置進(jìn)度條的樣式

strokeWidth:20,

//strokeWidth：設(shè)置進(jìn)度條寬度

scaleCount:100,

//scaleCount：設(shè)置環(huán)形進(jìn)度條總刻度數(shù)

scaleWidth:10

//scaleWidth：設(shè)置環(huán)形進(jìn)度條刻度粗細(xì)

})

.value(22)

//屬性3：當(dāng)前進(jìn)度,會(huì)覆蓋參數(shù)的當(dāng)前進(jìn)度滑動(dòng)條組件Slider滑動(dòng)條組件Slider，用來快速調(diào)節(jié)音量、亮度等。Slider組件默認(rèn)寬度為父容器寬度的100%。Slider常用的參數(shù)說明如下：Slider(value:{value?:

number,

//當(dāng)前進(jìn)度值,默認(rèn)值0

min?:

number,

//設(shè)置最小值,默認(rèn)值0max?:

number,

//設(shè)置最大值,默認(rèn)值100step?:

number,

//設(shè)置Slider滑動(dòng)跳動(dòng)值,默認(rèn)值1style?:

SliderStyle

//設(shè)置Slider的滑塊樣式,默認(rèn)值Outset})滑動(dòng)條組件SliderSliderStyle的取值有兩種SliderStyle.OutSet：滑塊在滑軌上SliderStyle.InSet：滑塊在滑軌內(nèi)Slider(){...

}

.blockColor(Color.Red)//設(shè)置滑塊的顏色

.selectedColor(Color.Green)//設(shè)置滑軌的已滑動(dòng)顏色

.showSteps(true)//默認(rèn)值false,設(shè)置當(dāng)前是否顯示步長(zhǎng)刻度值

.showTips(true)//默認(rèn)值false,設(shè)置滑動(dòng)時(shí)是否顯示氣泡提示百分比}SliderStyle常用的屬性滑動(dòng)條組件SliderSlider滑動(dòng)時(shí)觸發(fā)onChange的事件回調(diào)，value為當(dāng)前進(jìn)度值，mode為拖動(dòng)狀態(tài)。其中mode有4種：SliderChangeMode.Begin：開始拖動(dòng)滑塊。SliderChangeMode.Moving：正在拖動(dòng)滑塊過程中。SliderChangeMode.End：結(jié)束拖動(dòng)滑塊。SliderChangeMode.Clic