Day 7 - 复盘与巩固

ViewModel 保存状态
-> View 用 Binding 显示和修改状态
-> Button 用 Command 触发动作
-> ViewModel 做验证和处理
-> View 自动显示处理结果

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
 
namespace ProductApp.ViewModels;
 
public partial class MainWindowViewModel : ViewModelBase
{
    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(SaveCommand))]
    private string productName = "Keyboard";
 
    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(SaveCommand))]
    private string priceText = "199";
 
    [ObservableProperty]
    private string message = "修改商品信息后点击保存。";
 
    public string StatusText =>
        string.IsNullOrWhiteSpace(ProductName) ? "名称未填写" : $"当前商品：{ProductName.Trim()}";
 
    partial void OnProductNameChanged(string value)
    {
        OnPropertyChanged(nameof(StatusText));
    }
 
    private bool CanSave()
    {
        return !string.IsNullOrWhiteSpace(ProductName) &&
               decimal.TryParse(PriceText, out decimal price) &&
               price > 0;
    }
 
    [RelayCommand(CanExecute = nameof(CanSave))]
    private void Save()
    {
        decimal price = decimal.Parse(PriceText.Trim());
        Message = $"保存成功：{ProductName.Trim()}，价格 {price}";
    }
}

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:ProductApp.ViewModels"
        x:Class="ProductApp.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Width="560"
        Height="340"
        Title="Week 7 复盘">
  <StackPanel Margin="20"
              Spacing="10">
    <TextBlock Text="{Binding StatusText}"
               FontSize="20"
               FontWeight="Bold" />
 
    <TextBlock Text="商品名称" />
    <TextBox Text="{Binding ProductName, Mode=TwoWay}" />
 
    <TextBlock Text="商品价格" />
    <TextBox Text="{Binding PriceText, Mode=TwoWay}" />
 
    <Button Content="保存"
            Command="{Binding SaveCommand}" />
 
    <TextBlock Text="{Binding Message}"
               TextWrapping="Wrap" />
  </StackPanel>
</Window>

desktop.MainWindow = new MainWindow
{
    DataContext = new MainWindowViewModel(),
};

[NotifyCanExecuteChangedFor(nameof(SaveCommand))]
private string productName = "Keyboard";

<TextBox Text="{Binding ProductName, Mode=TwoWay}" />
<Button Content="保存" Command="{Binding SaveCommand}" />

[ObservableProperty]
private string _title = "商品管理";

<TextBlock Text="{Binding Title}" />

[RelayCommand]
private void Clear() => Title = "";

<Button Content="清空" Command="{Binding ClearCommand}" />

public ObservableCollection<string> Items { get; } = new();
 
[RelayCommand]
private void Add() => Items.Add($"Item {Items.Count + 1}");

<ListBox ItemsSource="{Binding Items}" />

1. 把 Week 7 的 MVVM 知识连成一条主线。
2. 能解释 `ObservableProperty`、`RelayCommand`、`CanExecute`、`ObservableCollection` 的作用。
3. 能重写一个 MVVM 表单小窗口。

[ObservableProperty]
private double temperature;
 
private void UpdateTemperature(double value)
{
    Temperature = value;
}

Temperature 改变后绑定界面自动刷新

[RelayCommand]
private void StartCollecting()
{
    StatusText = "正在采集";
}

按钮通过 StartCollectingCommand 启动采集

Devices.Add(new DeviceItem("PLC-03", "在线"));
Alarms.Add(new AlarmItem("PLC-03", "高温"));

设备列表和报警列表都自动增加一项

Week 7 主线：
ViewModel 保存页面状态。
View 用 Binding 显示和修改状态。
Button 用 Command 触发 ViewModel 方法。
ViewModel 用 CanExecute 控制按钮能不能执行。
ViewModel 做验证并更新 Message。
集合页面用 ObservableCollection 通知列表新增删除。
列表页面用 SelectedItem 表示当前选中项。

看到一个 Avalonia 页面需求
-> 先定义 ViewModel 状态
-> 再让 View 绑定状态
-> 按钮动作写成命令
-> 输入错误写成验证
-> 列表数据用 ObservableCollection
-> 当前项用 SelectedItem
-> 最后把新增、保存、删除串成闭环