ArkTs选项卡 文本/输入框 按钮 参数
一、选项卡
代码：
@Entry @Component struct TabsDemo { @State currentIndex: number = 0; build() { Tabs({ barPosition: BarPosition.End }) { TabContent() { // 首页内容写在这里 Text("首页内容") }.tabBar("首页") TabContent() { // 推荐内容写在这里 Text("推荐内容") }.tabBar("推荐") TabContent() { // 我的内容写在这里 Text("我的内容") }.tabBar("我的") } .width('100%') .height('100%') } }运行结果：
代码解析：
@Entry @Component struct TabsDemo { @State currentIndex: number = 0;@Entry标记该结构体为独立页面，需要在main_pages.json中注册，可作为路由页面单独打开。@ComponentArkTS 标准自定义组件装饰器，所有页面 / 封装组件必须添加。struct TabsDemo页面组件名称，遵循大驼峰命名规范。@State currentIndex: number = 0;@State：状态装饰器，变量改变时页面自动刷新；currentIndex：记录当前激活标签的下标，初始值0，默认选中第一个标签「首页」；- 作用：可手动控制标签切换、监听标签切换事件。
Tabs({ barPosition: BarPosition.End }) { // 三个TabContent子项 } .width('100%') .height('100%')Tabs({ barPosition: BarPosition.End })Tabs 是多标签切换容器，barPosition控制标签栏位置：BarPosition.End：标签栏放在底部（底部导航栏效果，当前代码效果）；BarPosition.Start：标签栏放在顶部。
- 宽高属性
.width('100%')/.height('100%')：Tabs 容器铺满整个屏幕。
TabContent() { // 首页内容写在这里 Text("首页内容") }.tabBar("首页")TabContent()单个标签对应的内容容器，一个标签页对应一个TabContent； 大括号内为切换后展示的页面主体内容，可以写 Column、Video、List 等任意组件。.tabBar("首页")定义底部标签栏显示的文字，参数为字符串； 三个 Tab 分别对应文字：首页/推荐/我的。
三个 Tab 对应下标
下标 0：TabContent → tabBar ("首页")
下标 1：TabContent → tabBar ("推荐")
下标 2：TabContent → tabBar ("我的")
ets
Tabs({ barPosition: BarPosition.End, index: this.currentIndex }) .onChange((index: number) => { this.currentIndex = index; console.log("当前切换到下标：", index); })index: this.currentIndex：双向绑定，可代码手动修改currentIndex实现自动切页；
.onChange：每次切换标签触发回调，获取当前选中下标。
二、文本/输入框
代码：
@Entry @Component struct FormDemo { @State username: string = ''; @State password: string = ''; build() { Column({ space: 15 }) { Text("账号") .fontSize(16) .width('100%') TextInput({ placeholder:'请输入账号', text: this.username }) .width('100%') .height(40) .onChange((val) => { this.username = val; // 输入内容变化同步到状态变量 }) Text("密码") .fontSize(16) .width('100%') TextInput({ placeholder: '请输入密码', text: this.password }) .width('100%') .height(40) .type(InputType.Password) .onChange((val) => { this.password = val; }) } .padding(15) } }运行结果：
代码解析：
@Entry @Component struct FormDemo { @State username: string = ''; @State password: string = ''; }@Entry标识当前结构体为独立页面，需要在main_pages.json中注册，可单独路由跳转。@ComponentArkTS 自定义组件必带装饰器，标记这是一个 UI 组件。struct FormDemo页面组件名称，遵循大驼峰命名规范。@State username: string = '';/@State password: string = '';@State：响应式状态装饰器，变量值改变时，绑定该变量的 UI 会自动刷新；username：存储账号输入框内容，初始为空字符串；password：存储密码输入框内容，初始为空字符串。
Column({ space: 15 }) { // 账号区域 // 密码区域 } .padding(15)Column({ space: 15 })垂直布局容器，内部元素从上至下排列；space:15代表子组件之间统一上下间距 15。.padding(15)给整个表单容器四周添加 15px 内边距，内容不会紧贴屏幕边缘。
Text("账号") .fontSize(16) .width('100%') TextInput({ placeholder:'请输入账号', text: this.username }) .width('100%') .height(40) .onChange((val) => { this.username = val; // 输入内容变化同步到状态变量 })1. Text ("账号")
作为输入框的文字标签：
.fontSize(16)：文字字号 16；
.width('100%')：文字宽度占满父容器，左对齐展示。
2. TextInput 账号输入框（核心输入组件）
构造参数：
placeholder:'请输入账号'：输入框为空时显示的灰色提示文字；
text: this.username：输入框绑定状态变量，实现数据单向绑定。
链式属性：
.width('100%')：输入框宽度铺满父容器；
.height(40)：输入框固定高度 40；
.onChange((val)=>{})：输入内容变更触发回调，val是当前输入框最新文本，把值同步给this.username，完成双向数据联动。
Text("密码") .fontSize(16) .width('100%') TextInput({ placeholder: '请输入密码', text: this.password }) .width('100%') .height(40) .type(InputType.Password) .onChange((val) => { this.password = val; })逻辑和账号输入框基本一致，唯一差异：.type(InputType.Password)设置输入框类型为密码模式，输入内容自动显示为圆点 / 星号，隐藏明文。
三、按钮
代码：
Button("登录")
.width('90%')
.height(45)
.fontSize(16)
.backgroundColor('#007dff')
.borderRadius(8)
.onClick(() => {
console.log("用户点击了登录按钮");
})
代码解析：
1. 基础组件声明
Button("登录")
功能：创建一个按钮组件，括号内字符串是按钮显示文字，页面上会展示「登录」二字。
2. 尺寸样式属性（链式调用）
.width('90%')按钮宽度占父容器宽度的 90%，左右预留少量空白，不会贴满屏幕边缘。.height(45)按钮固定高度 45px，控制按钮垂直高度，保证点击区域舒适。.fontSize(16)按钮内部文字字号为 16，调整文字大小。.backgroundColor('#007dff')设置按钮背景色为蓝色（十六进制色值#007dff，鸿蒙常用主题蓝）。.borderRadius(8)圆角属性，四个边角圆角半径 8px，实现柔和圆角按钮，避免直角生硬。
.onClick()：按钮点击触发事件，括号内是回调函数，手指点击按钮就会执行内部代码。
console.log("用户点击了登录按钮")：打印日志，在 DevEco Studio 底部控制台输出文本，用于调试，验证点击是否生效。
四、参数：
import router from '@ohos.router'; @Entry @Component struct RouterRegister{ @State username:string = "" @State password:string = "" @State password2:string = "" build() { Column({space:25}){ Image($r('app.media.2')) .width(120) .height(120) .borderRadius(60) Text("注 册") .fontSize(32) .fontWeight(FontWeight.Bolder) Row(){ Text("账号") .fontSize(26) .width('40%') .textAlign(TextAlign.Center) TextInput({text:this.username}) .width('60%') .height(50) .onChange((value:string)=>{ this.username = value }) } Row(){ Text("密码") .fontSize(26) .width('40%') .textAlign(TextAlign.Center) TextInput({text:this.password}) .width('60%') .height(50) .type(InputType.Password) .onChange((value:string)=>{ this.password = value }) } Row(){ Text("确认密码") .fontSize(26) .width('40%') .textAlign(TextAlign.Center) TextInput({text:this.password2}) .width('60%') .height(50) .type(InputType.Password) .onChange((value:string)=>{ this.password2 = value }) } Text("已有账号，立即登录") .fontSize(22) .fontColor(0xababab) .onClick(()=>{ router.pushUrl({ url:"pages/RouterLogin" }) }) Button("立即注册") .width('100%') .height(50) .fontSize(24) .onClick(()=>{ if ((this.username!="") && (this.password!="") && (this.password2!="") && (this.password==this.password2)){ router.pushUrl({ url:"pages/HomePage", params:{ username:this.username, password:this.password } }) } else { AlertDialog.show({ title:"注册失败", message:`注册的两次密码为空或者不一致， ${this.username}` }) } }) } .width('100%') .height('100%') .padding(15) } }代码解析：
1. 路由导入
typescript
运行
import router from '@ohos.router';引入路由模块，提供页面跳转与参数传递 API。
2. 无参跳转（登录页面）
router.pushUrl({ url:"pages/RouterLogin" })pushUrl：页面入栈跳转方法
url：目标页面地址
3. 带参跳转（首页，核心传参代码）
router.pushUrl({ url:"pages/HomePage", params:{ username:this.username, password:this.password } })url:"pages/HomePage"：跳转目标页面路径params：路由专属参数载体对象，用于跨页传值username、password：自定义参数键名，下一页取值需同名this.username / this.password：当前页面@State绑定的输入框数据，作为参数值传递
4. 参数来源变量
@State username:string = "" @State password:string = ""@State响应式变量，TextInput 通过onChange同步用户输入，作为传给下一页的参数数据源。
5. 目标页面固定接收参数代码（配套传参读取逻辑）
aboutToAppear() { let params = router.getParams() let name = params.username let pwd = params.password }router.getParams()：读取上一页params中全部传递数据
通过.键名取出对应传递过来的值