# 点击切换页面方法汇总（上）点击切换页面方法汇总（上）模态转场 Tabs容器 Swiper容器将会汇总相关的点击切

模态转场

概念：

模态转场是一种界面交互方式，在模态转场中，新的界面或内容会以模态窗口的形式覆盖在当前界面之上，用户必须先与模态窗口进行交互，完成相关操作或关闭窗口后，才能返回原来的界面继续操作。

半模态

.bindSheet(xxx,xxx1,{xxx2:xxx3,xxx4:xxx5})

xxx：判断条件（如果成立则显示该模态页面）

xxx1：半模态页面函数

xxx2-xxx5：半模态页面属性(可放置更多)

xxx可使用双向绑定$$

代码示例：

@Entry
@Component
struct In {
  //创建判断条件
  @State isShow:boolean=false
  //页面函数
  @Builder
  bindPage() {
    Column() {
      Text('第一行')
      Text('第二行')
      Text('第三行')
      Text('第四行')
    }
    .width('100%')
    .height('100%')

  }
  build() {
    Column(){
      Button('半模态')
        .bindSheet(
          $$this.isShow,
          this.bindPage(),
          {
            backgroundColor:'#9cb0ff00',
            shadow:{
              radius:25,
            }
          }
        )
        .onClick(() => {
          this.isShow = true
        })
    }
    .backgroundColor('#ffffec25')
    .height('100%')
    .width('100%')
  }
}

半模态的判断条件要使用@State修饰，否则不会显示半模态容器

全模态

.bindContentCover(xxx,xxx1,{xxx2:xxx3,xxx4:xxx5})

xxx：判断条件（如果成立则显示该模态页面）

xxx1：半模态页面函数

xxx2-xxx5：半模态页面属性(可放置更多)

xxx可使用双向绑定$$

参考代码借鉴半模态，只有关键词bindContentCover不同

常用可选属性（xxx2-xxx5）

名称	类型	必填	描述
height	SheetSize \| Length	否	半模态高度，默认是LARGE。说明：底部弹窗竖屏时，当设置detents时，该属性设置无效。
dragBar	boolean	否	是否显示控制条，默认显示。说明：半模态面板的dentents属性设置多个不同高度并且设置生效时，默认显示控制条。否则不显示控制条。
showClose	boolean \| Resource	否	是否显示关闭图标，默认显示。
detents	[(SheetSize \| Length), ( SheetSize \| Length)?, (SheetSize \| Length)?]	否	半模态页面的切换高度档位。说明：底部弹窗竖屏生效，元组中第一个高度为初始高度。

Tabs容器

概念：

Tabs 容器是一种用户界面组件，通过点击每个面板的标签（Tab）进行切换，通常用于在一个界面中展示多个相关的内容面板，每个面板通过标签（Tab）进行切换。
内部只能放tabContent，是tab的子页面，tabContent有一个.tabBar属性，是对应界面的导航栏，可以在括号里放函数来自定义导航栏

属性

.vertical(布尔值)
.barPosition(BarPosition.xxx)
scrollable(布尔值)
.animationDuration(1000)

Tabs(){
  TabContent(){}
  .tabBar('首页')
  TabContent(){}
  .tabBar('分类')
  TabContent(){}
  .tabBar('探索')
  TabContent(){}
  .tabBar('我的')
}
.vertical(false)
.barPosition(BarPosition.End)
.scrollable(true)
.animationDuration(1000)

使用vertical结合barPosition来做到实现让导航栏出现在屏幕的四个边上

tabContant

是Tabs的子组件，Tabs内只能放该子组件

tabContant里面的内容就是该页面的内容

@Entry
@Component
struct TabbarDemo {
  build() {
    Tabs() { // 顶级容器
      TabContent() {
        // 内容区域：只能有一个子组件
      }
      .tabBar('首页') // 导航栏
    }
  }
}

.tabBar()

是tabContant的属性

.tabBar()是给TabContent应用的，每个TabContent都有一个属于他自己的tabBar，这个tabBar会在Tab内显示出来

tabBar的()内部可以放自定义结构@Builder修饰的函数

TabContent(){
  this.tab1()
}
    .tabBar(this.tabBar1) //使用自定义的tabBar
//自定义tabBar
@Builder
tabBar1(){
  Column(){
    Text('首页')
  }
  .justifyContent(FlexAlign.Center)
  .backgroundColor('#eca')
  .width('100%')
  .height('100%')
}

注意，再使用builder自定义tabBar的时候，Builder修饰的函数内组件的宽高百分比都是根据设置的tabBar的宽高的百分比而设置的

如果一个大的tabs里面其中一个tabsBar使用了自定义的话，其他的tabsBar就算没有使用自定义，也都会被同时变为没有下划线只有字符高亮的模式

tabContant内部只能放一个子组件，有点类似build（）内

可以在tabContant内放@Builder修饰的包含组件的函数

一般情况下不要给导航栏添加onClick点击事件，要用onTabBarClick(()=>{})

Swiper容器

定义

是一个可以实现轮播的容器组件
就是常用的轮播图组件

常用属性

通用属性
是否循环:.loop()
是否自动播放:.autopl()
自动播放间隔时间:.interval()
是否垂直轮播:.vertacal()
导航点相关属性:.indicator()
1. 是否显示导航点:.indicator()
2. 导航点样式:.indictor(Indicator.dot())
3. 导航点属性
  1. 选中导航点的长度宽度:.indictor(Indicator.dot().selectedHeight().selectedWidth())
  2. 选中导航点的颜色:.indictor(Indicator.dot().selectedColor())
  3. 未选中状态下的导航点的长度宽度:.indictor(Indicator.dot().itemHeight().itemWidth())
  4. 未选中导航点的颜色:.indictor(Indicator.dot().itemColor())

示例代码

@Entry
@Component
struct In {
  build() {
    Column(){
      Swiper(){
        Row(){}
        .linearGradient({colors:[['#fec',0],['#cbf',1]]})
        .height('100%')
        .width('100%')
        Row(){}
        .linearGradient({colors:[['#ffcfffcc',0],['#ff86b0ff',1]]})
        .height('100%')
        .width('100%')
        Row(){}
        .linearGradient({colors:[['#fec',0],['#ff5eccff',1]]})
        .height('100%')
        .width('100%')
        Row(){}
        .linearGradient({colors:[['#ffffcce4',0],['#fffff743',1]]})
        .height('100%')
        .width('100%')
      }
      .height(200)
      .loop(true)
      .autoPlay(true)
      .interval(2000)
      .vertical(false)
      .indicator(true)
      .indicator(Indicator.dot().selectedColor('#e1a2ef').itemWidth(1).selectedItemWidth(80).itemHeight(1))
    }
    .width('100%')
    .height('100%')
  }
}