容器组件 Scroll和容器组件Tabs的内容

                             ## 容器组件Scroll

说明：可滚动的容器组件，当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动

核心用法

参数类型

举个例子

@Entry
@Component
struct Index {


  @Builder
  build() {
    Column() {
      Scroll(){
        Column(){
          Text('内容').fontSize(150)
        }
      }.width(200)
      
      //设置纵向还是横向滚动 纵向滚动.height要设置的小一点  横向滚动.width要设的小一点
      .scrollable(ScrollDirection.Horizontal)
      .height('100%')
      
      // 设置滚动条颜色
      .scrollBarColor(Color.Pink)
      
      //设置滚动条宽度
      .scrollBarWidth(50)
      //设置滚动条的显示方式 开启关闭或者短时间存在
      .scrollBar(BarState.On)
      // 设置边缘滑动效果
      .edgeEffect(EdgeEffect.Fade)
    }
    .width('100%')
    .height('100%')
    // .backgroundColor(Color.Pink)

  }
}

Scroll控制器

scrollEdge方法参数

滑动到一定举例后 点击某个设定好的地方可以直接回到上方的参数所在的地方 用if语句与

用法举例

@Entry
@Component
struct Index {

// 先设置一个  scroller控制器
  scroller: Scroller = new Scroller()

  @Builder
  build() {
    Column() {
      Scroll(this.scroller) {       //将控制器带入到Sceoll中
        Text('内容').fontSize(150)
      }
      .width(200)
      .scrollable(ScrollDirection.Horizontal)
      .height('100%')
      .scrollBarColor(Color.Pink)
      .scrollBarWidth(50)
      .scrollBar(BarState.On)
      .edgeEffect(EdgeEffect.Fade)

//                                  //////在设置一个按钮 在按钮下面设置点击事件
      Row() {
        Button('点击返回顶部')
          .onClick(() => {
          通常设置一个x  或者一个y就可以了 纵向的设置y  横向的设置yx
            const x = this.scroller.currentOffset().xOffset  
            const y = this.scroller.currentOffset().yOffset
            
            ///   AlertDialog.show({ })  该组件可以在点击的时候弹出来里面输入的内容
            AlertDialog.show({ message:
              message: `${x},${y}`
            })
          })
      }
    }
    .width('100%')
    .height('100%')
  }
}

onScroll 事件【Api12开始请使用onWillScroll事件替代】

用法举例

@Entry
@Component
struct Index {
 
 //创建个Scroller控制器
 sc: Scroller = new Scroller()
 
 //创建个布尔类型
@State sss:boolean=false
  @Builder
  build() {
    Column() {
      Scroll(this.sc) {                  //植入控制器
        Text('内容').fontSize(150)
      }
      .width(200)
      .scrollable(ScrollDirection.Horizontal)
      .height('100%')
      .scrollBarColor(Color.Pink)
      .scrollBarWidth(50)
      .scrollBar(BarState.On)
      .edgeEffect(EdgeEffect.Fade)
      .onWillScroll((x,y)=>{     // .onWillScroll是个箭头函数  用if判断this.sc.currentOffset().xOffset取到的值在达到设定好的值后为真 否则为假
        if (this.sc.currentOffset().xOffset>400) {
this.sss=true
        }else {
          this.sss=false
        }
      })

///用一个图标来当触发器  当if判断为真的时候 该图标显现
if(this.sss){
       Image('/imgs/ic_tabbar_icon_0_selected.png')
       
  //// 图标下配合scrollEdge方法参数来设置点击事件 当点击该图标时回到scrollEdge方法给的参数代表的方向去
  
          .onClick(() => {
          this.sc.scrollEdge(Edge.Top)
          })
          }

    }
    .width('100%')
    .height('100%')
  }
}

容器组件tabs

说明：tabs下面只能有一个组件tabscontent 该组件后面带着 tabBar

@Entry
@Component
struct TabbarDemo02 {
  build() {
    // /////////层容器
    Tabs() {
      // ////////////内容
      TabContent() {                   /////////// TabContent()下面可以设置其他组件容器也可以在其他组件容器下面继续增加tabs
      
      coloumn{
        Text('首页的内容')
          .fontSize(30)
      }
      }
      
     ////////// // tabBar
      
      .tabBar('首页')
      }
      }
      }

属性参数

方法举例

@Entry
@Component
struct Index {
  @Builder
  build() {
    Column(){
      Tabs(){
        TabContent(){

        }.tabBar()
      }
      /// 设置完导航栏位置在开头还是结尾后 设置 .vertical(true)这个可以将导航栏设置在左右两侧
      .vertical(true)
      /////调整导航栏位置在开头还是结尾
      .barPosition(BarPosition.Start)
      //////设置是否可以滑动内容来切换到其他导航栏里面去
      .scrollable(true)
      ///// 设置切换导航栏时的动画效果
      .animationDuration(2000)
    }
  }
}

滚动导航栏

说明：可以通过 Tabs 组件的 barMode 属性即可调整 固定导航栏 或 滚动导航栏

在导航栏数量多的情况因为尺寸有限会压缩导航栏 但是将导航栏设置为滑动就可以让使其充分显示导航栏

tabs组件中用来检测tabBar组件的切换的参数 onChange与onTabBarClick

自定义tabBar

自定义tabBar时多使用三元法

用法举例

///首先设置一个函数
interface su {
  tu: string
  zi: string
}

@Entry
@Component
struct Index {

////设定状态变量 

  @State bian: number = 0
  
////定义一个组件内的  @Builder 并且需要设定所需的多个参数 根据具体要求来设定 本次剧烈就需要两张图片与序列号还有字体四个参数

  @Builder
  fs(tu: string, tu1: string, zi: string, index: number) {
    Column() {
    
//////////////////////用三元法定义参数

      Image(this.bian == index ? tu : tu1)
        .width(30)
      Text(zi)

      /////   真的就输出真的字体颜色  假的则输出假的
        .fontColor(this.bian == index ? Color.Red : Color.Black)
    }
  }

  build() {
    Column() {
      Tabs() {
        TabContent() {
        
        //////////////  .tabBar里面的内容填充必须根据 @Builder 所设定好的参数依次按顺序填入
        
        }.tabBar(this.fs('/imgs/ic_tabbar_icon_0_selected.png', '/imgs/ic_tabbar_icon_0.png', '首页', 0))

        TabContent() {
        }.tabBar(this.fs('/imgs/ic_tabbar_icon_1_selected.png', '/imgs/ic_tabbar_icon_1.png', '分类', 1))
      }.width('100%')
      .height('100%')
      .barPosition(BarPosition.End)
      
      /// .onChange 在里面设定状态变量==  @Builder的序列号index 当点击任何一个导航栏时会自动有个序列号进入 根据序列号是不是等于设定的变量等于那就是真的 三元也就输出真的  否则输出假的 其他的不变   根据上面学的根据 .onChange和onTabBarClick都可以检测导航栏什么时候进行了切换 当前案例用的是onChange
      
      .onChange((index: number) => {
        this.bian = index
      })
    }.width('100%')
    .height('100%')
  }
}