登陆页面

MauiProgram.cs

@@ -1,4 +1,6 @@
-using CommunityToolkit.Maui;
+using autosos_maui.ViewModels;
+using autosos_maui.Views;
+using CommunityToolkit.Maui;
 using Microsoft.Extensions.Logging;
 
 namespace autosos_maui;
@@ -15,7 +17,10 @@ public static class MauiProgram
             {
                 fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                 fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
-            });
+            })
+            .RegisterViews()
+            .RegisterViewModels()
+            .RegisterAppServices();
 
 #if DEBUG
         builder.Logging.AddDebug();
@@ -23,4 +28,24 @@ public static class MauiProgram
 
         return builder.Build();
     }
+
+    public static MauiAppBuilder RegisterViews(this MauiAppBuilder mauiAppBuilder)
+    {
+        mauiAppBuilder.Services.AddTransient<LoginView>();
+
+        return mauiAppBuilder;
+    }
+
+    public static MauiAppBuilder RegisterViewModels(this MauiAppBuilder mauiAppBuilder)
+    {
+        mauiAppBuilder.Services.AddSingleton<LoginViewModel>();
+
+        return mauiAppBuilder;
+    }
+
+    public static MauiAppBuilder RegisterAppServices(this MauiAppBuilder mauiAppBuilder)
+    {
+
+        return mauiAppBuilder;
+    }
 }

Resources/Styles/Colors.xaml

@@ -6,7 +6,7 @@
 
     <!-- Note: For Android please see also Platforms\Android\Resources\values\colors.xml -->
 
-    <Color x:Key="Primary">#512BD4</Color>
+    <Color x:Key="Primary">#EB0E0E</Color>
     <Color x:Key="PrimaryDark">#ac99ea</Color>
     <Color x:Key="PrimaryDarkText">#242424</Color>
     <Color x:Key="Secondary">#DFD8F7</Color>

Resources/Styles/Styles.xaml

@@ -423,4 +423,8 @@
         <Setter Property="SelectedTabColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
     </Style>
     
+    <Style x:Key="Autosos-Entry" TargetType="Entry">
+        <Setter Property="FontSize" Value="16"></Setter>
+    </Style>
+
 </ResourceDictionary>

ViewModels/LoginViewModel.cs

@@ -1,6 +1,18 @@
-namespace autosos_maui.ViewModels;
+using System.Diagnostics;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 
-public class LoginViewModel
+namespace autosos_maui.ViewModels;
+
+public partial class LoginViewModel : ObservableObject
 {
+    [ObservableProperty] private string _userName = "";
+    [ObservableProperty] private string _password = "";
 
+    [RelayCommand]
+    public void Login()
+    {
+        Debug.WriteLine("login");
+        Debug.WriteLine("username:{0},password:{1}",_userName,_password);
+    }
 }

Views/LoginView.xaml

@@ -2,18 +2,37 @@
 
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             x:Class="autosos_maui.Views.LoginView">
+             x:Class="autosos_maui.Views.LoginView"
+             xmlns:viewmodels="clr-namespace:autosos_maui.ViewModels"
+             x:DataType="viewmodels:LoginViewModel">
     <ContentPage.Content>
-        <VerticalStackLayout Padding="20">
+        <VerticalStackLayout Padding="20" Spacing="20">
 
             <HorizontalStackLayout VerticalOptions="Center">
                 <Image Source="ic_launcher.png" WidthRequest="50" HeightRequest="50" />
-                <VerticalStackLayout>
-                    <Label Text="欢迎登录啾啾救援"></Label>
+                <VerticalStackLayout Margin="20,0">
+                    <Label Text="欢迎登录啾啾救援" FontSize="20" FontAttributes="Bold"></Label>
                     <Label Text="宁波易到互联科技有限公司"></Label>
                 </VerticalStackLayout>
             </HorizontalStackLayout>
 
+            <StackLayout Orientation="Horizontal">
+                <Label Text="+86" Padding="10" HorizontalOptions="Center" VerticalOptions="Center" FontSize="16"></Label>
+                <Label Text="|" Padding="15" HorizontalOptions="Center" VerticalOptions="Center"></Label>
+                <StackLayout HorizontalOptions="FillAndExpand">
+                    <Entry Placeholder="请输入手机号" Text="{Binding UserName,Mode=TwoWay}"
+                           Style="{StaticResource Autosos-Entry}" Keyboard="Numeric">
+                    </Entry>
+                </StackLayout>
+            </StackLayout>
+
+            <StackLayout HorizontalOptions="FillAndExpand">
+                <Entry Placeholder="请输入密码" Text="{Binding Password, Mode=TwoWay}"
+                       Style="{StaticResource Autosos-Entry}" Keyboard="Numeric">
+                </Entry>
+            </StackLayout>
+
+            <Button Text="登录" Command="{Binding LoginCommand}"></Button>
         </VerticalStackLayout>
     </ContentPage.Content>
 </ContentPage>

Views/LoginView.xaml.cs

@@ -3,13 +3,17 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using autosos_maui.ViewModels;
 
 namespace autosos_maui.Views;
 
 public partial class LoginView : ContentPage
 {
-    public LoginView()
+    private readonly LoginViewModel _viewModel;
+
+    public LoginView(LoginViewModel loginViewModel)
     {
+        BindingContext = _viewModel = loginViewModel;
         InitializeComponent();
     }
 }

autosos-maui.csproj

@@ -64,5 +64,4 @@
         <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="$(MauiVersion)" />
         <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />
     </ItemGroup>
-
 </Project>