一个登录界面，如图：

首先分析，垂直方向出现了5排，分别是顶部的图片组件，两个输入框，一个登录按钮，一排“前往注册“和”忘记密码“组件，他们水平对齐，用row容器，代码如下：

@Entry
@Component
struct IndexTest {@State message: string = 'IndexTest';build() {Column({space:15 //子组件和字组件的距离}){Image($r('app.media.app_icon')).height(60)TextInput({placeholder:'请输入用户名'}).padding({left:20})TextInput({placeholder:'请输入密码'}).type(InputType.Password).padding({left:20})Button("登录").width('100%')Row({space:15 //子组件和子组件的距离}){Text('前往注册')Text('忘记密码')}}.padding(15) //字组件和容器的距离}
}