一、stack组件

@Entry
@Component
struct ImageStackDemo{
build() {
Column(){
Text('鸿蒙应用开发实战')
.fontSize(25)
.fontWeight(FontWeight.Bold)
.margin({top:30})
Stack(){
Image($r('app.media.1'))
.width(320)
.height(180)
.borderRadius(15)
.objectFit(ImageFit.START)

Text('ArkUI组件练习')
.fontSize(22)
.fontColor(Color.White)
.backgroundColor(0x550000)
.padding({left:15,right:15,top:6,bottom:6})
.borderRadius(8)
}    .width('100%').height('100%').margin({top:-260})
Radio({value:'Radio1',group:'xueli'}).checked(false)
Radio({value:'Radio2',group:'xueli'}).checked(false)
Radio({value:'Radio3',group:'xueli'}).checked(false)

Radio({value:'男',group:'sex'}).checked(false)
Radio({value:'女',group:'sex'}).checked(false)

Button('开始学习')
.backgroundImage($r('app.media.1'))
.border({width:3,color:Color.Red})
}
.width('100%')
.height('100%')
}
}

二、单选框按钮

import { promptAction } from '@kit.ArkUI';
@Entry
@Component
export struct RadioExample {
@State rst: promptAction.ShowToastOptions = { 'message': 'Ringing mode.' };
@State vst: promptAction.ShowToastOptions = { 'message': 'Vibration mode.' };
@State sst: promptAction.ShowToastOptions = { 'message': 'Silent mode.' };

build() {
Row() {
Column() {
Radio({ value: 'Ringing', group: 'radioGroup' }).checked(true)
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
if (isChecked) {
this.getUIContext().getPromptAction().openToast(this.rst);
}
          })
Text('Ringing')
}

Column() {
Radio({ value: 'Vibration', group: 'radioGroup' })
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
if (isChecked) {
this.getUIContext().getPromptAction().openToast(this.vst);
}
          })
Text('Vibration')
}

Column() {
Radio({ value: 'Silent', group: 'radioGroup' })
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
if (isChecked) {
this.getUIContext().getPromptAction().openToast(this.sst);
}
          })
Text('Silent')
}
    }.height('100%').width('100%').justifyContent(FlexAlign.Center)
}
}

三、性别单选框

@Entry
@Component
struct RadioDemo{
build() {
Column(){
Row(){
Text('性别：')
.fontSize(28)
Radio({ value: 'boy', group: 'sex' })
.height(30)
.width(30)
Text('男')
.fontSize(16)
.margin({right:50})
Radio({ value: 'gril', group: 'sex' })
.height(30)
.width(30)
Text('女')
.fontSize(16)
}
    }
.width('100%')
.height('100%')
}
}

四、个人信息页面

@Entry
@Component
struct RadioDemo{
build() {
Column({space:20}){
Text('填写个人信息')
.fontSize(30)
Row(){
Text('姓名：')
TextInput({ placeholder: "请输入姓名：" })
.width(240)
.height(40)
.backgroundColor(0xf5f5f5)
.fontSize(20)
.borderRadius(10)
}
Row(){
Text('性别：')
.fontSize(15)
Radio({ value: 'boy', group: 'sex' })
.height(30)
.width(30)
Text('男')
.fontSize(15)
.margin({right:130})
Radio({ value: 'gril', group: 'sex' })
.height(30)
.width(30)
Text('女')
.fontSize(15)
}
Row(){
Text('年龄：')
TextInput({ placeholder: "请输入年龄：" })
.width(240)
.height(40)
.backgroundColor(0xf5f5f5)
.fontSize(20)
.borderRadius(10)
}
Row(){
Text('学历：')
.fontSize(15)
Radio({ value: 'benke', group: 'school' })
.height(30)
.width(30)
Text('本科')
.fontSize(15)
.margin({right:100})
Radio({ value: 'zhuanke', group: 'school' })
.height(30)
.width(30)
Text('专科')
.fontSize(15)
}
Button("提交")
.width(100)
.height(50)
.backgroundColor(0x007DFF)
.fontSize(20)
.borderRadius(8)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}

五、个人信息登录卡面

@Entry
@Component
struct StyleDemo1{
build() {
Column({space:20}){
Text('个人信息登录卡面')
.fontSize(24)
.fontWeight(FontWeight.Bold)
Text('姓名：张三')
.fontSize(18)
Text('专业：软件技术')
.fontSize(18)
TextInput({placeholder:"请输入账号"})
.width(320)
.height(50)
.backgroundColor(0xF8F8F8)
.borderRadius(15)
.padding({left:20})
TextInput({placeholder:"请输入班级"})
.width(320)
.height(50)
.backgroundColor(0xF8F8F8)
.borderRadius(15)
.padding({left:20})
TextInput({placeholder:"请输入密码"})
.width(320)
.height(50)
.backgroundColor(0xF8F8F8)
.borderRadius(15)
.padding({left:20})
.type(InputType.Password)

Button("登录")
.width(320)
.height(50)
.borderRadius(12)
.backgroundColor(0x007dff)
.fontSize(18)
.fontColor(Color.White)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}