國產化即時通訊系統開發 -- 使用Avalonia實現GGTalk的UI介面（Linux、Ubuntu、UOS、中標麒麟）

距離2013年開源GGTalk以來，7年已經過去了，GGTalk現在有了完整的PC版、安卓版、iOS版（即將釋出），以及Xamarin版本。

然而，時代一直在變化，在今天，有個趨勢越來越明顯，那就是政府系統將逐漸遷移到Linux以及國產化的作業系統和資料庫上面來。

所以，GGTalk也將隨順這一必然的趨勢，服務端將推出Linux（CentOS）版本，客戶端也將支援Linux/Ubuntu、中標麒麟、UOS等國產作業系統。

基於.NET Core，服務端的遷移相對容易；而客戶端的遷移則繁瑣很多，其主要在於介面UI部分需要完全重寫。

在考察了眾多的Linux上的UI技術之後，我們選定了現在很主流的Avalonia框架作為GGTalk的客戶端版本的UI技術。 

在使用Avalonia開發GGTalk客戶端linux版本的過程中，我們遇到了很多坑，也積累了很多經驗，接下來我們將通過“Avalonia跨平臺UI開發”這個系列，將這些過坑的經驗分享出來，為後來者提供參考。

那下面先從Avalonia簡介開始吧。

一. Avalonia簡介

Avalonia是一個基於WPF XAML的跨平臺UI框架，並支援多種作業系統：Windows（.NET Framework，.NET Core），Linux（GTK），MacOS，Android和iOS。

通過Avalonia，可以使用XAML標記來實現應用程式的外觀，同時使用程式碼來實現其行為。

Avalonia官網：https://avaloniaui.net/

Avalonia開源地址：https://github.com/AvaloniaUI/Avalonia

 

1.開發準備

VS 2019安裝擴充套件 https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaforVisualStudio

安裝之後就有了Avalonia開發模板。

 

選擇 Avalonia MVVM Application ，就可以建立一個專案。

 

2. GGTalk 登入介面示例

新建一個基礎專案GGTalk，在MainWindow.xaml 新增圖片、按鈕、輸入框等控制元件，就是WPF XAML 的語法，直接可以實現對應佈局。

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:myoneavalonia.ViewModels;assembly=myoneavalonia"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="430" d:DesignHeight="330"
        x:Class="myoneavalonia.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Title="GGTalk"
        Width="430"
        Height="340"
        CanResize="False" 
        WindowStartupLocation="CenterScreen">
    

    <Design.DataContext>
        <vm:MainWindowViewModel/>
    </Design.DataContext>


 　　<Window.Styles >
            <Style Selector="TextBox.tb1">
                <Setter Property="Margin" Value="0,-40,0,0"/>
                <Setter Property="Height" Value="26"/>
                <Setter Property="Width" Value="250"/>
                <Setter Property="Watermark" Value="賬號"/>
                <Setter Property="BorderBrush" Value="#80c0ff"/>
            </Style>
           <Style Selector="TextBox.tb2">
               <Setter Property="Margin" Value="0,35,0,0"/>
               <Setter Property="Height" Value="26"/>
               <Setter Property="Width" Value="250"/>
               <Setter Property="Watermark" Value="密碼"/>
               <Setter Property="BorderBrush" Value="#80c0ff"/>
               <Setter Property="PasswordChar" Value="*"/>
           </Style>
           <!--######<TextBox標籤>######-->
           
           
           <Style Selector="Image.img1">
               <Setter Property="Margin" Value="0,-250,0,0"/>
               <Setter Property="Width" Value="430"/>
           </Style>
           <Style Selector="Image.img2">
               <Setter Property="Margin" Value="0,-190,0,0"/>
               <Setter Property="Width" Value="73"/>
               <Setter Property="Height" Value="73"/>
           </Style>
           <!--######<Image標籤>######-->
           
           
           <Style Selector="TextBlock.tbk1">
               <Setter Property="Margin" Value="5,5,0,0"/>
               <Setter Property="Foreground" Value="White"/>
           </Style>
           <Style Selector="TextBlock.tbk2">
               <Setter Property="Margin" Value="292,213,0,0"/>
               <Setter Property="Foreground" Value="#0c7ab9"/>
               <Setter Property="Cursor" Value="Hand"/>
           </Style>
           <Style Selector="TextBlock.tbk3">
               <Setter Property="Margin" Value="275,305,0,0"/>
               <Setter Property="Foreground" Value="#696969"/>
           </Style>
           <!--######<TextBlock標籤>######-->

           

           <Style Selector="Button.bt1">
               <Setter Property="Margin" Value="0,195,0,0"/>
               <Setter Property="Width" Value="250"/>
               <Setter Property="Height" Value="40"/>
               <Setter Property="Background" Value="#407cff"/>
               <Setter Property="Foreground" Value="White"/>
               <Setter Property="FontSize" Value="17"/>
           </Style>
           <!--######<Button標籤>######-->

       
           <Style Selector="CheckBox.cbx1">
               <Setter Property="Margin" Value="89,105,0,0" />
               <Setter Property="BorderBrush" Value="#3c9fc5"/>
           </Style>
           <Style Selector="CheckBox.cbx2">
               <Setter Property="Margin" Value="190,105,0,0"/>
               <Setter Property="BorderBrush" Value="#3c9fc5"/>
           </Style>
           <!--######<CheckBox標籤>######-->     
       </Window.Styles>
    
    
    
<StackPanel>    
    <Border Background="White"
            BorderBrush="Gray"
            BorderThickness="1"
            Padding="0"
            Width="430"
            Height="340">            
        <Grid>                
            <Image Classes="img1" Source="D:\yzy\avaloniafiles\myoneavalonia\Resources\image_sign.png" ></Image>
            <Image Classes="img2" Source="D:\yzy\avaloniafiles\myoneavalonia\Resources\8.png" />
            <TextBlock Classes="tbk1">GGTalk 2020</TextBlock>
            <TextBlock Classes="tbk2">註冊登入</TextBlock>
            <TextBlock Classes="tbk3">GGTalk 企業即時通訊系統</TextBlock>
            <TextBox Classes="tb1"/>
            <TextBox Classes="tb2"/>
            <CheckBox Classes="cbx2" >自動登入</CheckBox>
            <CheckBox Classes="cbx1" >記住密碼</CheckBox>
            <Button Classes="bt1">登入</Button>
        </Grid>            
    </Border>
</StackPanel>    

</Window>

 如果熟悉WPF XAML，那麼上面的程式碼理解起來就非常容易了。

二. 執行程式

 我們在Ubuntu和中標麒麟上執行這個程式，效果如下所示（還不錯吧）：

（在Ubuntu上執行的效果）

（在中標麒麟上執行的效果）

三. 在使用Avalonia時遇到的坑

在開發這個登入介面的時候，遇到了三個坑。

（1）當將<Textbox>輸入框標籤的height屬性設定為小於或等於25時，在輸入框的右邊，會多出一個下拉框。

研究了半天才發現跟輸入框高度有關，瞬間淚崩......

 

（2）官方文件中有一些控制元件無法正常使用，提示無法解析該型別，在執行時會報錯，比如：

解決方案：在官網（https://avaloniaui.net/）上下載對應的控制元件，然後引入專案中就不會報錯了。

 （3）另外，在Ubuntu上執行Avalonia專案後如果沒有顯示介面，這時就需要去修改/etc/apt/sources.list檔案，更新軟體源後就能夠顯示介面了。

更換軟體源的步驟：

Ubuntu 的源存放在在 /etc/apt/ 目錄下的 sources.list 檔案中，修改前我們先備份，在終端中執行以下命令：

sudo cp /etc/apt/sources.list /etc/apt/sources.list.bcakup

然後執行下面的命令開啟 sources.list 檔案，清空裡面的內容

sudo gedit /etc/apt/sources.list

把下面阿里雲與清華大學的 Ubuntu 源複製進去，儲存後退出

# 阿里雲源
deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse
##測試版源
deb http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse
# 原始碼
deb-src http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse
##測試版源
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse


# 清華大學源
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic main restricted universe multiverse
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-security main restricted universe multiverse
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-updates main restricted universe multiverse
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-backports main restricted universe multiverse
##測試版源
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-proposed main restricted universe multiverse
# 原始碼
deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic main restricted universe multiverse
deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-security main restricted universe multiverse
deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-updates main restricted universe multiverse
deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-backports main restricted universe multiverse
##測試版源
deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-proposed main restricted universe multiverse

接著在終端上執行以下命令更新軟體列表，檢測出可以更新的軟體：

sudo apt-get update

最後在終端上執行以下命令進行軟體更新：

sudo apt-get upgrade

 

到這裡，GGTalk的登入介面就實現完成了。同樣的，我們會將GGTalk的Linux/國產化作業系統的版本的原始碼全部放出來給大家參考，敬請期待。