// xxx.ets @Entry @Component struct Index { build() { Column() { TextArea({text:"我是TextArea我是TextArea我是TextArea我是TextArea"}).width(300) }.width('100%') } }
2.设置输入框类型
// xxx.ets @Entry @Component struct Index { build() { Column() { TextInput() .type(InputType.Normal) TextInput() .type(InputType.Password) }.width('100%') } }
3.自定义样式
// xxx.ets @Entry @Component struct Index { build() { Column() { TextInput({placeholder:'我是提示文本'}) TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'}) TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'}) .backgroundColor(Color.Pink) }.width('100%') } }
4.添加事件
// xxx.ets @Entry @Component struct Index { build() { Column() { TextInput() .onChange((value: string) => { console.info(value); }) .onFocus(() => { console.info('获取焦点'); }) }.width('100%') } }
5.案例
登录界面是一种用于认证用户身份的界面。当用户访问需要身份验证的网站、应用程序或系统时，他们通常需要输入其用户名和密码来登录。登录界面通常包括一个输入框，以便用户输入其用户名或电子邮件地址，以及一个密码输入框，用于输入其密码。有些登录界面甚至还可包括验证码输入框或其他安全信息，以提高安全性。
登录界面是Web和移动应用程序中常见的界面元素，因为它们允许应用程序和网站保护其用户的个人信息和数据。登录界面通常需要正确的用户名和密码才能访问应用程序或网站。登录后，应用程序或网站将与该用户关联，并在以后的访问中保持登录状态，使用户能够轻松地访问其个人信息和数据。
@Entry @Component struct TextInputSample { build() { Column() { TextInput({ placeholder: 'input your username' }).margin({ top: 20 }) .onSubmit((EnterKeyType)=>{ console.info(EnterKeyType+'输入法回车键的类型值') }) TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 }) .onSubmit((EnterKeyType)=>{ console.info(EnterKeyType+'输入法回车键的类型值') }) Button('Sign in').width(150).margin({ top: 20 }) }.padding(20) } }
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
