使用Xamarin开发移动应用示例——数独游戏(八)使用MVVM实现完成游戏列表页面

项目代码可以从Github下载:https://github.com/zhenl/ZL.Shudu 。代码随项目进度更新。

前面我们已经完成了游戏的大部分功能,玩家可以玩预制的数独游戏,也可以自己添加新的游戏。现在我们实现展示已完成游戏列表页面,显示用户已经完成的游戏列表,从这个列表可以进入详细的复盘页面。

前面的页面我们采用的是传统的事件驱动模型,在XAML文件中定义页面,在后台的cs文件中编写事件响应代码。采用这种模型是因为很多页面需要动态生成控件,然后动态改变这些控件的属性,事件驱动模型在这种场景下比较好理解。现在我们采用MVVM方式编写完成游戏列表页面。

MVVM是将页面绑定到视图模型,所有的操作和事件响应通过视图模型完成。视图模型中没有页面控件的定义,因此和页面是解耦的,可以独立进行测试。在视图模型中我们只关心数据,而不关心展示数据的控件。

首先,我们定义一个视图模型的基类,下一步在改造其它页面时,会用到这个基类:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Text;

namespace ZL.Shudu.ViewModels
{
    public class BaseViewModel : INotifyPropertyChanged
    {

        bool isBusy = false;
        public bool IsBusy
        {
            get { return isBusy; }
            set { SetProperty(ref isBusy, value); }
        }

        string title = string.Empty;
        public string Title
        {
            get { return title; }
            set { SetProperty(ref title, value); }
        }

        protected bool SetProperty(ref T backingStore, T value,
            [CallerMemberName] string propertyName = "",
            Action onChanged = null)
        {
            if (EqualityComparer.Default.Equals(backingStore, value))
                return false;

            backingStore = value;
            onChanged?.Invoke();
            OnPropertyChanged(propertyName);
            return true;
        }

        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            var changed = PropertyChanged;
            if (changed == null)
                return;

            changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }
}

这个基类实现INotifyPropertyChanged接口,帮助实现属性在页面的双向绑定。然后,定义完成列表页面的视图模型:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using ZL.Shudu.Models;
using ZL.Shudu.Views;

namespace ZL.Shudu.ViewModels
{
    public class FinishGameViewModel:BaseViewModel
    {
        private FinishGame _selectedItem;
        public ObservableCollection Items { get; }

        public Command LoadItemsCommand { get; }
        public Command ItemTapped { get; }

        public FinishGameViewModel()
        {
            Title = "完成游戏列表";
            Items = new ObservableCollection();
            LoadItemsCommand = new Command(async () => await ExecuteLoadItemsCommand());

            ItemTapped = new Command(OnItemSelected);
        }

        async Task ExecuteLoadItemsCommand()
        {
            IsBusy = true;

            try
            {
                Items.Clear();
                var items = await App.Database.GetFinishGamesAsync();
                foreach (var item in items)
                {
                    Items.Add(item);
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex);
            }
            finally
            {
                IsBusy = false;
            }
        }

        public FinishGame SelectedItem
        {
            get => _selectedItem;
            set
            {
                SetProperty(ref _selectedItem, value);
                OnItemSelected(value);
            }
        }

        public void OnAppearing()
        {
            IsBusy = true;
            SelectedItem = null;
        }

        async void OnItemSelected(FinishGame item)
        {
            if (item == null)
                return;

            // This will push the ItemDetailPage onto the navigation stack
            await Shell.Current.GoToAsync($"{nameof(FinishGameDetailPage)}?{nameof(FinishGameDetailPage.ItemId)}={item.Id}");
        }
    }
}

主要功能有两个,一是从数据库中读取数据,二是响应选中数据事件并跳转到显示详细信息的页面。
接下来定义页面:



    
        
            
                
                    
                        
                
            
        
    

页面后台代码:

using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using ZL.Shudu.ViewModels;

namespace ZL.Shudu.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class FinishGameListPage : ContentPage
    {
        FinishGameViewModel _viewModel;
        public FinishGameListPage()
        {
            InitializeComponent();

            BindingContext = _viewModel = new FinishGameViewModel();
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
            _viewModel.OnAppearing();
        }
    }
}

页面后台代码只负责将页面绑定到视图模型,不做其它工作。运行效果如下:
使用Xamarin开发移动应用示例——数独游戏(八)使用MVVM实现完成游戏列表页面_第1张图片
接下来完成游戏的复盘页面。这个页面调入已完成的游戏,可以使用向前和向后复盘游戏的过程,在实现上与游戏页面类似。
XAML页面代码如下:



    
        
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
                

                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                

                
                
                
                


                
                
            
        
    

后台代码如下:

using System;
using System.Collections.Generic;


using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using ZL.Shudu.Models;

namespace ZL.Shudu.Views
{
    [QueryProperty(nameof(ItemId), nameof(ItemId))]
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class FinishGameDetailPage : ContentPage
    {
        private static int[,] chess = new int[9, 9];
        private Button[,] buttons = new Button[9, 9];
        int[,] fchess = new int[9, 9];

        private List steps = new List();
        private int currentsetp = 0;

        private long currentDiffer = 0;
        private int currentId;
        public string ItemId
        {
            get
            {
                return currentId.ToString();
            }
            set
            {
                currentId = int.Parse(value);
                if (currentId > 0)
                {
                    var game = App.Database.GetFinishGameAsync(currentId).Result;
                    if (game != null) OpenHistory(game);
                }

            }
        }

        public string Title { get; set; } = "游戏记录";
        public FinishGameDetailPage()
        {
            InitializeComponent();
            SetLayout();
        }

        private void SetResult(bool beginonly = false)
        {
            currentsetp = beginonly ? 0 : steps.Count - 1;
            for (var i = 0; i < 9; i++)
            {
                for (var j = 0; j < 9; j++)
                {
                    var btn = buttons[i, j];
                    if (chess[i, j] > 0)
                    {
                        btn.Text = chess[i, j].ToString();
                        btn.TextColor = Color.Red;
                    }
                    else
                    {

                        btn.Text = beginonly ? "" : fchess[i, j].ToString();
                        btn.TextColor = Color.Blue;

                    }

                }
            }
        }

        private void SetLayout()
        {
            for (var i = 0; i < 9; i++)
            {
                for (var j = 0; j < 9; j++)
                {
                    int m = i / 3;
                    int n = j / 3;
                    var btn = new Button();
                    var c = new Color(0.9, 0.9, 0.9);
                    var c1 = Color.Green;
                    if ((m + n) % 2 == 0)
                    {
                        c = new Color(1, 1, 1);

                    }
                    btn.BackgroundColor = c;
                    btn.Padding = 0;
                    btn.Margin = 0;
                    btn.FontSize = 20;
                    myGrid.Children.Add(btn, i, j);

                    buttons[i, j] = btn;


                }
            }
        }


        private void btn_Begin_Clicked(object sender, EventArgs e)
        {
            SetResult(true);
        }

        private void btn_End_Clicked(object sender, EventArgs e)
        {
            SetResult(false);
        }

        private void btn_Forward_Clicked(object sender, EventArgs e)
        {

            SetStep(false);
            currentsetp++;
        }

        private void btn_Back_Clicked(object sender, EventArgs e)
        {

            SetStep(true);
            currentsetp--;
        }

        private void SetStep(bool isback)
        {
            if (currentsetp < 0) currentsetp = 0;
            if (currentsetp >= steps.Count) currentsetp = steps.Count - 1;
            var laststep = steps[currentsetp];
            var arr = laststep.Split(",".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);
            int x = int.Parse(arr[0]), y = int.Parse(arr[1]), num = int.Parse(arr[2]);
            if (isback) buttons[x, y].Text = "";
            else buttons[x, y].Text = fchess[x, y].ToString();
        }

        private void OpenHistory(FinishGame item)
        {
            try
            {
                if (item!=null)
                {
                   
                  
                    for (var i = 0; i < 9; i++)
                    {
                        for (var j = 0; j < 9; j++)
                        {
                            chess[i, j] = int.Parse(item.Sudoku.Substring(i * 9 + j, 1));
                            fchess[i, j] = int.Parse(item.Result.Substring(i * 9 + j, 1));
                        }
                    }
                    SetResult();
                    if (!string.IsNullOrEmpty(item.Steps))
                    {
                        var steparr = item.Steps.Split(";".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);
                        steps.Clear();
                        steps.AddRange(steparr);
                    }
                   
                    currentDiffer =item.TotalTime;
                    
                    var diff =  currentDiffer / 10000 / 1000 / 60;
                    lbTime.Text = diff + "分钟";
                }
            }
            catch (Exception ex)
            {

                lbMessage.Text = ex.Message;
            }
        }
    }
}

到这里,数独游戏已经基本完成了,当然还有许多需要优化改进的地方,会陆续完成,可以关注https://github.com/zhenl/ZL.Shudu 。

你可能感兴趣的:(使用Xamarin开发移动应用示例——数独游戏(八)使用MVVM实现完成游戏列表页面)