浙江网站建设推广公司哪家权威,wordpress物联网插件,如何评判网站建设岗位,聊城做网站网络公司1、Scroll组件 Scroll组件是一个可滚动的容器组件#xff0c;用于在子组件的布局尺寸超过父组件尺寸时提供滚动功能。它允许在其内部容纳超过自身显示区域的内容#xff0c;并通过滚动机制来查看全部内容。这对于显示大量信息#xff08;如长列表、长篇文本或大型图像等用于在子组件的布局尺寸超过父组件尺寸时提供滚动功能。它允许在其内部容纳超过自身显示区域的内容并通过滚动机制来查看全部内容。这对于显示大量信息如长列表、长篇文本或大型图像等非常有用。 常用属性 ① scrollable设置滚动方向。可选值包括ScrollDirection.Vertical垂直滚动默认值和ScrollDirection.Horizontal水平滚动。在更新的版本中也可能支持Axis.Both表示允许在垂直和水平两个方向上滚动。 ② scrollBar设置滚动条状态。可选值包括BarState.Auto自动显示滚动条默认值、BarState.On始终显示滚动条和BarState.Off始终不显示滚动条。在更新的版本中也可能使用BarVisibility.Auto、BarVisibility.Always和BarVisibility.Never。 ③ scrollBarColor和scrollBarWidth分别用于设置滚动条的颜色和宽度。 ④ edgeEffect设置滑动效果。默认值通常为EdgeEffect.None表示没有滑动效果。其他可选值取决于开发环境和版本。 ⑤ enableScrollInteraction设置是否支持滚动手势。当设置为false时无法通过手指或鼠标滚动但不影响通过控制器接口进行的滚动。默认值为true。 测试代码
function getRandomColor() {const letters :string 0123456789ABCDEF;let color:string #;for (let i 0; i 6; i) {let Itemp:numberMath.floor(Math.random() * 16)color letters.substr(Itemp,1);}return color;
}
function convertColorStringToNumber(colorStr: string): number {if (colorStr.startsWith(#)) {let r parseInt(colorStr.slice(1, 3), 16);let g parseInt(colorStr.slice(3, 5), 16);let b parseInt(colorStr.slice(5, 7), 16);return (r 16) | (g 8) | b;}return 0;
}
Extend(Text) function CustomTextStyle(){.fontSize(16).fontColor(Color.White).backgroundColor(getRandomColor()).width(500).height(150).textAlign(TextAlign.Center).padding(10).margin(10).border({width:1,color:Color.Red})
}
Entry
Component
struct Index {numbers: string[] [1, 2, 3, 4,5,6];State myBarSate:BarStateBarState.OnState myScrollDirection:ScrollDirectionScrollDirection.HorizontalState myScrollBarColor:ColorColor.Graybuild() {Column(){Row(){Button(滚动条颜色).onClick(() {this.myScrollBarColorconvertColorStringToNumber(getRandomColor())})Button(滚动条状态).onClick(() {this.myBarSate( this.myBarSateBarState.On?BarState.Off:(this.myBarSateBarState.Off?BarState.Auto:BarState.On) )console.log(this.myBarSate.toString())})Button(滚动方向).onClick(() {this.myScrollDirectionthis.myScrollDirectionScrollDirection.Horizontal?ScrollDirection.Vertical:ScrollDirection.Horizontal// this.myScrollDirectionScrollDirection.Verticalconsole.log(this.myScrollDirection.toString())})}.width(100%).height(10%).backgroundColor(Color.Orange)Row(){Scroll() {Column(){ForEach(this.numbers, (item: string, index: number) {Row(){Text(item).CustomTextStyle()}})}}.scrollBar(this.myBarSate).scrollable(this.myScrollDirection).backgroundColor(Color.Pink).width(100%).scrollBarColor(this.myScrollBarColor).scrollBarWidth(6)}.layoutWeight(1).width(100%).justifyContent(FlexAlign.Center)}}
} 效果图 通过按钮点击可以更换滚动条的颜色、滚动方向和是否可见设置一个整数变量还可以更改滚动条的宽度。 二、List组件 List组件是一个非常重要的容器组件它用于按照垂直或水平方向线性排列一系列相同宽度的列表项适合连续、多行呈现同类数据例如图片和文本。 常用属性 ⑴ space设置列表项之间的间距。 ⑵ initialIndex设置初次加载时起始位置显示的列表项索引。 ⑶ scroller控制器可以控制组件的滚动。 ⑷ clip默认值为true用于设置是否裁剪列表项的内容。 ⑸ listDirection设置List组件的排列方向垂直或水平。 ⑹ divider设置ListItem分割线样式包括线条宽度、颜色和边距等。 ⑺ scrollBar设置滚动条状态。 ⑻ cachedCount设置列表中ListItem/ListItemGroup的预加载数量只在LazyForEach中生效。 ⑼ edgeEffect设置边缘滑动效果。 ⑽ chainAnimation设置是否启用链式联动动效开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。 ⑾ multiSelectable设置是否开启鼠标框选。 ⑿ ListItemAlign设置列表项滚动结束对齐效果。 常用方法列表子项目被点击 测试代码
function getRandomColor() {const letters :string 0123456789ABCDEF;let color:string #;for (let i 0; i 6; i) {let Itemp:numberMath.floor(Math.random() * 16)color letters.substr(Itemp,1);}return color;
}
Extend(Text) function CustomTextStyle(){.fontSize(16).fontColor(getRandomColor()).width(80%).height(40).textAlign(TextAlign.Start).padding(10).margin(10).borderRadius(10).backgroundColor(0xFFFFFF).border({ width: 2, color: Color.Green })
}
Entry
Component
struct Index {State myListDirectiong:AxisAxis.VerticalState myListCount:Number1State isCardStyle:boolean false;State arr: string[][1, 2, 3, 4, 5 , 6, 7, 8, 9];State selectedIndex:number-1;//被点击项的索引State selectedText: string;//被点击项的文本内容build() {Column() {Row(){Button(列表方向).onClick(() {this.myListDirectiongthis.myListDirectiongAxis.Vertical?Axis.Horizontal:Axis.Vertical})Button(2列).onClick(() {this.myListCount2})Button(1列).onClick(() {this.myListCount1})}.width(90%).height(40%).border({width:2,color:Color.Blue}).backgroundColor(Color.Orange)Row(){List({ space: 10, initialIndex: 0 }) {ForEach(this.arr, (item: string,index) {ListItem() {Text(item).CustomTextStyle().onClick(() {this.selectedIndex index;this.selectedText item;console.log(点击了索引为${index}的项文本内容为: ${item});});}}, (item: string) item)}.height(60%).width(80%).friction(0.6).border({ width: 4, color: Color.Red }).backgroundColor(Color.Pink).listDirection(this.myListDirectiong).lanes(this.myListCount as number,10)}}.width(100%).height(100%).backgroundColor(Color.Gray)}
} 效果图 很多参数都可以在运行中更改比如可以实现列表的卡片样式和详细列表的切换。 三、Tabs组件 Tabs组件是一个在程序中经常用到并且功能强大的容器组件它允许开发者通过页签来切换不同的内容视图。 常用属性 ⑴ barPosition设置导航栏的位置。可以是BarPosition.Start顶部或BarPosition.End底部。当vertical属性为true时barPosition设置为start则导航栏位于左侧设置为end则导航栏位于右侧。 ⑵ vertical设置导航栏的方向。可以是false水平或true垂直。 ⑶ scrollable控制是否允许滑动。当导航栏的内容过多无法在一屏内显示完时可以通过设置scrollable为true来允许滑动。 ⑷ animationDuration设置切换动画的时间单位为毫秒。 ⑸ barMode设置导航栏的模式。可以是BarMode.Fixed固定或BarMode.Scrollable滚动。当标签页过多时可通过barMode属性设置导航栏的滑动。 ⑹ barWidth设置TabBar的宽度。 ⑺ barHeight设置TabBar的高度在垂直模式下使用。 ⑻ divider设置页签之间的分割线样式。 ⑼ fadingEdge设置页签超过容器宽度时是否渐隐消失。 ⑽ barOverlap设置TabBar是否背后变模糊并叠加在TabContent之上。 ⑾ barBackgroundColor设置TabBar的背景颜色。 常用的点击事件是点击标题栏和具体的选择区域内的元素。 测试代码
Entry
Component
struct Index {State mySelectedIndex: number 0BuildermyBuildBar(index: number, title: string, img?: ResourceStr, selectImg?: ResourceStr) {Column() {Image(index this.mySelectedIndex ? selectImg : img).width(30).fillColor(Color.Orange)Text(title).fontColor(index this.mySelectedIndex ?Color.Red:Color.Gray).onClick((){console.log(点击了${title}栏)})}}build() {Column() {Tabs({ barPosition: BarPosition.Start }) {TabContent() {Text(首页)}.tabBar(this.myBuildBar(0, 首页, $r(app.media.ic_public_view_grid), $r(app.media.startIcon)))TabContent() {Text(购物)}.tabBar(this.myBuildBar(1, 购物, $r(app.media.Home03), $r(app.media.Office4)))TabContent() {Text(我的)}.tabBar(this.myBuildBar(2, 我的, $r(app.media.ic_public_download), $r(app.media.ic_user_portrait)))}.onChange((index: number) {this.mySelectedIndex index;}).vertical(false) //垂直导航 | 水平导航 true.scrollable(true) //允许滑动 | 不允许滑动 false.animationDuration(200) //切换动画时间毫秒// .barMode(BarMode.Scrollable) //允许标题栏滚动.barWidth(150) // 设置标题栏宽度增加标题之间的间隔.barHeight(60) // 设置标题栏高度}.width(100%).height(100%).backgroundColor(Color.White)}
} 效果图
