HarmonyOS 开发基础（二）组件拼凑简单登录页面

一、简单登录页面

@Entry
@Component
/*
组件可以基于struct实现，组件不能有继承关系，struct可以比class更加快速的创建和销毁。*/
struct Index {@State message: string = 'Hello World'build() {// https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-container-flex-0000001427902472-V3?catalogVersion=V3/* 对子组件的布局direction:FlexDirection.Column  子组件在Flex容器上排列的方向，即主轴的方向。 主轴与列方向一致作为布局模式。justifyContent:FlexAlign.Center 所有子组件在Flex容器主轴上的对齐格式。alignItems:ItemAlign.Center  所有子组件在Flex容器交叉轴上的对齐格式。*/Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Text("登录").fontSize(40).fontWeight(700)TextInput().width("80%").height(40)TextInput().width("80%").height(40)Button("进入app")}.width("100%").height("100%").border({width:15,color:"#000"})}
}

Preview 效果