國產化即時通信系統開發 — 使用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官網：//avaloniaui.net/

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

 

1.開發準備

VS 2019安裝擴展 //marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaforVisualStudio

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

 

選擇 Avalonia MVVM Application ，就可以創建一個項目。

 

2. GGTalk 登錄界面示例

新建一個基礎項目GGTalk，在MainWindow.xaml 添加圖片、按鈕、輸入框等控件，就是WPF XAML 的語法，直接可以實現對應布局。

<Window xmlns="//github.com/avaloniaui"
        xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:myoneavalonia.ViewModels;assembly=myoneavalonia"
        xmlns:d="//schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="//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）官方文檔中有一些控件無法正常使用，提示無法解析該類型，在運行時會報錯，比如：

解決方案：在官網（//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/國產化操作系統的版本的源碼全部放出來給大家參考，敬請期待。

 

Tags:

VirMach 便宜 VPS

QNews

QNews