文章目錄

• 前言
• 常用組件
• 快速開啟簡單的鴻蒙頁面
• 總結

一、前言

鴻蒙要想快速上手，那么就需要對基礎的組件使用比較熟悉，這里就羅列開發中常見的基礎組件的使用。

只要是寫android的，對于這些組件的使用還是能很快上手的，只要多多練習。

最后呢，這里會通過基礎組件的使用，將他們放到頁面中，這樣有更直觀的體驗。

二、常用的基礎組件

1、Image

     //圖片組件Image($r('app.media.icon'))// Image($rawfile('test.png'))  //如果是rawFile 要加后綴名.width(50).height(50).borderRadius(10).interpolation(ImageInterpolation.High) //圖片的插值效果（去掉鋸齒是圖片清晰）.margin({bottom: 10}).onComplete(img =>{console.log("圖片的寬度：" + img.width)}).onError(()=>{//圖片加載報錯，走這里})

2、Text

      //文本組件Text($r('app.string.register')).fontSize(20)  //字體大小.lineHeight(30) //行高.fontColor('#00f') //字體顏色.fontWeight(FontWeight.Medium)//字體粗細.margin({bottom: 10}).onClick(()=>{console.log('點擊事件')})

3、TextInput

        //文本輸入框TextInput({placeholder:'請輸入用戶名'}) //這里頭是提示文本.width('80%').height(40).backgroundColor('#cdcdcd').margin({left: 10})//密碼輸入框TextInput({placeholder: '請輸入密碼'}).width('80%').height(40).backgroundColor('#cdcdcd').type(InputType.Password) //輸入文本類型.showPasswordIcon(true) //是否顯示密碼icon.margin({bottom: 10}).onChange(val=>{console.log('輸入的值為：' + val)}).margin({left: 10})

4、Slider

        //滑動進度條Slider({value: this.high,min: 150,max: 190,step:1, //這里代表步長style: SliderStyle.InSet, //滑動頭的是在里面，還是在里面direction: Axis.Horizontal, //滑動條的方向。默認是橫向reverse: false //進度往哪個方向，是否是反向。默認是往右}).width('70%').trackThickness(20) //滑軌的粗細.showTips(true) //是否顯示進度條百分比.onChange(val =>{    //獲取進度的值this.high = valconsole.log('進度長度：' + val)})Text(this.high.toString()).fontSize(20).fontWeight(FontWeight.Medium)

5、Select

		//下拉框組件Select([{ value: '深圳'},{ value: '廣州'},{ value: '北京'},{ value: '上海'}]).selected(1)  //默認選擇的城市.value('請選擇城市') //提示文本.font({size:20, weight: FontWeight.Medium}).onSelect((index,value) =>{console.log('選擇的城市：' + value)})

6、Checkbox

      Row(){Text('興趣：').fontSize(20)//多選框群組CheckboxGroup({group: 'checkGroup'})//控制是否全選或者全不選.selectedColor('#f00').selectAll(true)  //默認是否全部選中，如果Checkbox 中的select 有值，那么子組件優先級高，這邊就不生效.onChange((itemName: CheckboxGroupResult) =>{ //被選中的組件名及狀態。全部選中的狀態是0，全不選是2，有選中是1console.log('選中的框是：'+ itemName.name + ' 狀態是：'+ itemName.status.toString())})Text('全選').fontSize(20)Checkbox({name: 'checkbox1', group: 'checkGroup'}).selectedColor('#f00')//選中的顏色.select(false) //這個優先級高于多選框群組的selectAll.onChange((value: Boolean) =>{console.log('checkbox1 是否選中：' + value)})Text('看書').fontSize(20)Checkbox({name: 'checkbox2', group: 'checkGroup'}).selectedColor('#f00')//選中的顏色.select(false).onChange((value: Boolean) =>{console.log('checkbox2 是否選中：' + value)})Text('跑步').fontSize(20)Checkbox({name: 'checkbox3', group: 'checkGroup'}).selectedColor('#f00')//選中的顏色.select(false).onChange((value: Boolean) =>{console.log('checkbox3 是否選中：' + value)})Text('釣魚').fontSize(20)}.width('100%').margin({bottom:10})

7、Radio

      Row(){Text('性別：').fontSize(20)//單選框組件 （記得寫多組，不然點擊看不出效果）Radio({value: '男', group: 'sex'}).height(20).width(20).checked(true).onChange((isChecked: Boolean)=>{if (isChecked) {console.log('男生 是否選中：' + isChecked)}})Text('男').fontSize(20)Radio({value: '女', group: 'sex'}).height(20).width(20).checked(true).onChange((isChecked: Boolean)=>{if (isChecked) {console.log('女生 是否選中：' + isChecked)}})Text('女').fontSize(20)}.width('100%')

三、布局

1、Column

     //垂直方向布局容器Column({space:20}){ //組件間的間距Text('組件一').fontSize(20).fontColor('#00f').lineHeight(FontWeight.Medium)Text('組件二').fontSize(20).fontColor('#00f').lineHeight(FontWeight.Medium)}.backgroundColor('#f00').width('100%').height(100).justifyContent(FlexAlign.Center)//這里是column里面組件  主軸的布局方式。有居中，有放在開始，有放在結束等。.alignItems(HorizontalAlign.Start) //這里是column里面組件 交叉軸的布局方式。

2、Row

     //水平方向布局容器Row(){Text('組件一').fontSize(20).fontColor('#00f').lineHeight(FontWeight.Medium)Text('組件二').fontSize(20).fontColor('#00f').lineHeight(FontWeight.Medium)}.backgroundColor('#0f0').width('100%').height(50).justifyContent(FlexAlign.Center)//主軸的布局方式，這是是居中.alignItems(VerticalAlign.Top) //交叉軸的布局方式，這里是放在頂部Text('組件三').fontSize(20).fontColor('#00f').lineHeight(FontWeight.Medium).margin(20)

3、Stack

//堆疊布局，后面的組件會覆蓋在前面的組件上面Stack(){Image($r('app.media.icon')).width(50).height(50)Text('hello world')//這個控件覆蓋在image上面}.width('90%').border({radius: 20}).backgroundColor('#f00')

四、快速開啟簡單的鴻蒙頁面

這是根據上面提到的組件和布局整理出來的，一個頁面。下面是效果圖。

最后呢，將我整理的這些組件都放到這個項目中，后面有新增，也會一并上傳。開發中，某些api忘記了，可以重新拿出來看看。

以上代碼地址：https://github.com/shenshizhong/ViewUseDemo

總結

1、羅列鴻蒙基礎組件的使用
2、幾個重要的布局組件的使用
3、快速擼一個簡單的鴻蒙頁面

如果對你有一點點幫助，那是值得高興的事情。：)
我的csdn：http://blog.csdn.net/shenshizhong
我的簡書：http://www.jianshu.com/u/345daf0211ad