🗒️Avalonia（三）普通架构实战——计算器
type
status
date
slug
summary
tags
category
icon
password
前言
在上一章中，我们简单的介绍了一下Avalonia的基本架构，那我们这次就用Avalonia的普通结构来进行开发。
写个计算器
首先我们得知道我们应该要写成什么样子。
一般来说一个计算器的结构是这样的：
我们可以按照这个来写。
分析一下结构
我们再写一个软件的前端UI布局的时候，首先就要剖析UI结构，那么接下来就让我们简单的来剖析一下：
首先是上面的文本部分，这个文本部分也分为两个小部分——历史计算跟现在的计算。
然后就是下方的5*4的按钮。
好，那我们开始写布局！
计算器前端界面
首先我们先写一个总体框架将这两部分框起来，我们这里使用的是Grid。这个是网格布局容器，通过设置网格行数跟列数来布局，就比如说：
在Grid类中，设置行数跟列数的是RowDefinitions跟ColumnDefinitions。参数为若干个Star(*)跟Auto的集合，中间用逗号隔开。而Star代表平均分配，Auto代表按照子控件的大小来分配。
所以我们可以这么写：
效果是这样的：
这里没有截完，不过无伤大雅。
简单讲一下这里用到的属性：
- TextBlock的
FontSize属性：设置字体大小
- Button的
HorizontalContentAlignmentVerticalContentAlignment属性：用来规范内容的位置，我们这里设置两者都为Center，就是中心位置
- Button的
Grid.Row Grid.Column属性：用来设置在Grid的行位置跟列位置。
- Button的
CornerRadius属性：用来设置圆角大小，有两种方式 - “10”：这个的意思是四个角都为10
- “10,10,10,10”：分别设置四个角
至于像什么长宽，背景什么的这里就不讲了。
不过这里还有一点需要说明的是，因为我们这里有特殊的需求，所有我们是需要自己再另外设置窗口的长宽的，在Window标签里头，我们设置：
第一行是用来设置在设计器上的长宽，第二行是设置实际的长宽的
不过我们这里可以发现，我们的20个按钮是有很多的相同属性的，就比如说长宽，内容布局和圆角属性。我们为了把代码写的更简洁一点，可以使用到Style（风格）这一方式，就是我们设计一个统一的风格，然后运用到应用中，就比如我们这个项目，可以这么写：
这样就简化了很多了，而且很之前是一样的。
现在再在Button中添加内容：
现在的样子就变得好看了点：
记得把Grid的
ShowGridLines 属性去掉。事件部分
在前面我们已经把前端的界面给写好了，那么现在我们可以正式写应用逻辑了。
首先我们给两个文本框设置一个名字，方便我们之后使用到：
对于一个控件来说，用户的每一个举动都会被捕捉到，然后就会出发一个事件，而我们要做的就是描述当用户进行这个操作的时候，一个要发生些什么。
在这个应用中，当用户点击按钮时，我们就要做出相应的举动。
按照这个逻辑，我们要给每一个按钮都绑定一个委托才行，但是事实上我们只需要使用一个函数就可以了。因为我们只需要通过Button里头的Context（内容）就可以知道它是什么按钮。
所有我们可以这么写：
与此同时：
这里函数的两个参数分别是调用事件的按钮本身跟事件参数，我们这里只是用本身就行。我们在这里直接获取到内容s。
所以我们就可以通过这个方法减少代码量，现在可以写成这个样子：
至于具体的运算，我们这里使用逆波兰表达式。不过这里我们就不多讲，关于逆波兰的内容，我们放到另外一篇文章细讲。
最后的代码是这种的：
MainWindow.axaml:
MainWindow.axaml.cs:
结尾
我们这次使用了普通模板来写了一个计算器项目，下一届我们将使用MVVM架构写一个文件浏览器，甚至要写一个文件管理器。
Loading...