仿微信登录页面制作

先看一下效果图

然后我们从上到下来看一下：

国家/地区这个部分：实际上点击以后应当是弹出一个框来选择的，我们可以给他整体做成一个Button，点击以后去执行相关的代码。那么这里的关键是，要把按钮的背景色设置为透明，这里的写法是

css 复制代码

.backgroundColor(Color.Transparent)

分割线：分割线一般有两种做法，一种是设置边框，然后宽度上只设置bottom的宽度，第二种就是通过Divider组件，这个组件本身就是用于分割的，好处是更加灵活

scss 复制代码

Divider()
  .width('90%')
  .strokeWidth(1)

这里还涉及到一个TextInput占位符的问题，可以从页面中看到，占位符的颜色明显和旁边的文字颜色不同，那么如果直接设置fontColor的话，设置的是输入的文字的颜色而不是占位符的颜色，对于TextInput组件占位符颜色的设置，使用的是placeholderColor这个属性。另外输入的是手机号，那么可以限制格式，以前习惯性的设置是InputType.Number，但是实际上这里使用InputType.PhoneNumber更加合适

中间有一个较大的空挡，这里使用的是空白填充组件Blank()，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。如果括号里不设置值的话，那么默认是撑满主轴，如果设置一个数字，代表是最小距离，即前后两个组件之间的最小距离，最大就是撑满整个父组件，但是，这里不允许设置百分比。

在找回密码和更多选项中间，有一个竖着的线，这个也是通过Divider组件实现的，只不过要把vertical属性设置为true，表示竖直方向

完整代码如下：

php 复制代码

import { router } from '@kit.ArkUI';

@Entry
@Component
struct LoginPage {
  @State message: string = '';
  build() {
    Column() {
      Text('手机号登录')
        .fontSize(24).fontWeight(FontWeight.Medium)
        .height(100)
      Button({ type: ButtonType.Normal }) {
        Row() {
          Text('国家/地区')
            .width(100)
            .fontSize(16).fontWeight(FontWeight.Medium)
          Text('中国大陆（+86）')
            .fontSize(16).fontColor('#9e9e9e')
        }.width('100%')
      }.backgroundColor(Color.Transparent)
      .width('90%').height(60)
      Divider()
        .width('90%')
        .strokeWidth(1)
      Row() {
        Text('手机号')
          .width(100)
          .fontSize(16).fontWeight(FontWeight.Medium)
        TextInput({ placeholder: '请填写手机号' })
          .placeholderColor('#b0b0b0')
          .fontSize(16)
          .backgroundColor(Color.Transparent)
          .padding({left:0})
          .type(InputType.PhoneNumber)
          .onChange((value)=>{
            this.message = value;
          })
      }.width('90%').height(60)
      Divider()
        .width('90%')
        .strokeWidth(1)
      Text('用微信号/QQ号/邮箱登录')
        .width('90%').fontSize(14).fontColor('#787f9f')
        .margin({top:20})
      Blank(220)
      Text('上述手机号仅用于登录验证')
        .fontSize(14).fontColor('#aaaaaa')
      Button('同意并继续',{type:ButtonType.Normal})
        .padding({top:10,bottom:10,left:50,right:50})
        .backgroundColor('#4ac163')
        .borderRadius(5)
        .margin({top:20})
        .onClick(()=>{
          if(this.message.length === 11){
            router.pushUrl({
              url:"pages/MainPage",
              params:{
                phone:this.message
              }
            })
          }
        })
      Blank()
      Row(){
        Button('找回密码')
          .fontSize(12)
          .fontColor('#787f9f')
          .backgroundColor(Color.Transparent)
        Divider()
          .vertical(true)
          .strokeWidth(1)
          .height(20)
        Button('更多选项')
          .fontSize(12)
          .fontColor('#787f9f')
          .backgroundColor(Color.Transparent)
      }
    }
    .width('100%').height('100%')
  }
}