梅科尔工作室--梁嘉莹-鸿蒙笔记3
目錄
List組件
子組件
接口
語法?
父子組件
組件導出
雙向數據綁定
if-else渲染
使用語法
注意事項
for循環渲染
使用語法
注意事項?
List組件
子組件：
Listitem?
接口：
List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})
屬性?
?
語法?
例
List({space:20}) {ListItem(){Text(1).fontSize(30).width("100%").height("10%").backgroundColor("#FFC0CB").textAlign(TextAlign.Center).borderRadius(20)}ListItem(){Text(2).fontSize(30).width("100%").height("10%").backgroundColor("#FFC0CB").textAlign(TextAlign.Center).borderRadius(20)}ListItem(){Text(3).fontSize(30).width("100%").height("10%").backgroundColor("#FFC0CB").textAlign(TextAlign.Center).borderRadius(20)}}效果如下（上下拉有彈性）
?
在List組件外面用.edgeEffect(EdgeEffect.None)?就可以消除彈性
父子組件
父組件：
子組件 （自定義組件）
?子組件不能直接預覽，必須導入父組件才行。
-
組件導出
子組件導出用export語句
export struct child{
父組件導入用import{子組件文件名稱}from "子組件文件相對路徑"
import {zidingyi} from "../common/component/child"
-
雙向數據綁定
改變任何一方數據時：兩方數據都會變為改變的一方數據
子組件中數據用@Link修飾：
@Link childnum:string
還要把子組件頁面里的Text或者其他組件里的值寫成? this.childnum
父組件中用@State修飾，在子組件接口中數據用$修飾:
@State fathernum:string = "父組件"
child({childnum:$fathernum})
if-else渲染
使用語法
if/else渲染可以改變組件的渲染狀態，即決定組件是否在頁面中被渲染，if括號內的變量是true的話，則對應下的組件都被渲染，否則都不被渲染。
if() {語句 }注意事項
必須在容器組件內使用。
使用if/else可以使子組件的渲染依賴條件語句。
for循環渲染
開發框架提供循環渲染（ForEach組件）來迭代數組，并為每個數組創建相應的組件。
ForEach定義如下：
使用語法
@Entry @Component struct Index {@State numlist:number[]= [0,1,2,3,4,5,6,7,8,9]@State num:number = 1build() {Column() {Text("列表").fontSize(30)List({space:20}) {ForEach(this.numlist,(item)=>{ListItem(){Text(item.toString()) //item是指數組里的數字，toString是把數字轉化為字符.fontSize(30).width("100%").height("10%").backgroundColor("#FFC0CB").textAlign(TextAlign.Center).borderRadius(20)}})}}.height('100%').width("100%").justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)} }注意事項?
必須在容器組件內使用。
生成的子組件允許在ForEach的父容器組件中，允許子組件生成器函數中包含if/else條件渲染，同時也允許ForEach包含在if/else條件渲染語句中；
總結
以上是生活随笔為你收集整理的梅科尔工作室--梁嘉莹-鸿蒙笔记3的全部內容，希望文章能夠幫你解決所遇到的問題。
