国产化即时通信系统开发 -- 使用Avalonia实现GGTalk的UI界面（Linux、Ubuntu、UOS、中标麒麟）

wind
wind 2023-07-17 15:05:28 49454
分类专栏： 资讯

距离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/国产化操作系统的版本的源码全部放出来给大家参考，敬请期待。

 

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=26493
赞同 0
评论 0 条

相关文章

  • 搭建国产化麒麟kylinos操作系统虚拟机 2022-09-29 48067 浏览

           &n

  • 中国长城中标中国石化1691万国产化项目 2023-03-05 50658 浏览

    中国长城成功中标中国石化国产化桌面终端设备框架协议（飞腾），中标金额1691万！该项目为中国石化及“三桶油”中首个国产化桌面终端框架采购项目。此次中标代表了中国长城持续赋能能源行业、推动高质量发展迈出的关键一步，对后续石油化工行业向国产化、数字化转型升级具有重要指导意义。新一代信息技术不断发展，推动着能源行业信息化能力和数字化水平显著提升，加速融入网信事业建设。作为2022年世界五百强排名前5名的

  • 数据中心IT基础设施国产化替代方案分析 2023-02-12 50991 浏览

    近年来，国际局势复杂多变，从2018年开始，美国持续加大对中国科技产业的制裁力度，先后将数百家中国高科技企业列入出口管制实体清单；2022年俄乌冲突爆发后，数据库、虚拟化、服务器等领域的头部IT厂商也陆续停止对俄罗斯的产品供应。在上述不可控国际因素的驱动下，以及国内数字经济转型的需要，我国IT产业自主可控的紧迫性愈加凸显。为了解决核心技术“卡脖子”的问题，科技自立自强已是我国的一项国家战略。在国家

  • 国产办公软件之国产化PS替代软件--悟空图像 2022-09-29 55029 浏览

      感谢楼主分享

  • 习近平：要打好科技仪器设备、操作系统和基础软件国产化攻坚战 2023-02-24 53048 浏览

    习近平强调，要协同构建中国特色国家实验室体系，布局建设基础学科研究中心，超前部署新型科研信息化基础平台，形成强大的基础研究骨干网络。中共中央政治局2月21日下午就加强基础研究进行第三次集体学习。中共中央总书记习近平在主持学习时强调，加强基础研究，是实现高水平科技自立自强的迫切要求，是建设世界科技强国的必由之路。各级党委和政府要把加强基础研究纳入科技工作重要日程，加强统筹协调，加大政策支持，推动基础

  • 上汽集团董事长陈虹：建议提高车规级芯片国产化率，建立汽车数据安全体系| 两会聚焦 2022-09-21 52692 浏览

    记者 | 侯卓铠 日前，全国人大代表、上汽集团党委书记、董事长陈虹公布了多项涉及汽车产业提案建议，涵盖了车规级芯片、汽车数据隐私安全、氢燃料电池汽车产业政策配套及新能源汽车“车电分离”商业模式等领域

  • 飞腾国产整机/国产化工控机/高能计算机GA-A3203工控整机 2022-09-21 48102 浏览

    国产办公电脑PC2000/飞腾电脑主板/国产主板(飞腾主板,飞腾电脑主板,嵌入式主板,

  • 实现国产化价值替代 软件业加速赋能数实融合 2023-02-16 49797 浏览

    北京2月7日，“东数西算”工程正式启动，“数据要素”市场建设加快推进……近年来，我国数字经济不断发展壮大，展现出蓬勃生机。根据《中国数字经济发展报告（2022年）》，2021年，中国数字经济规模达到45.5万亿元，占GDP比重达到39.8%，数字经济在国民经济中的地位更加稳固、支撑作用更加明显。《“十四五”数字经济发展规划》指出，数字经济是以数据资源为关键要素，以现代信息网络为主要载体，以信息通信

  • 漫谈“中间件”与国产化【转】 2022-09-21 50370 浏览

    操作系统、数据库、中间件号称基础软件的“三驾马车”。操作系统与数据库都不难理解，唯独中间

  • 紧抓“数智化”与信创国产化历史机遇 云转型战略显成效 2023-02-01 51155 浏览

    3月18日晚，用友网络（600588.SH）正式发布2021年年度报告。公告显示，公司实现营业收入89.32亿元，同比增长4.7%，主营业务云服务与软件业务收入86.41亿元，同比增长15.7%。其中，由于公司推进云转型，软件业务收入同比下降18.0%，而云服务业务收入同比增长55.5%，占云服务与软件业务收入61.6%，较上年同期提升15.8个百分点。此外，公司拟向全体股东每10股派发现金股利1

wind
windL1
粉丝 0 发表 50 + 关注 私信
上周热门
如何使用 StarRocks 管理和优化数据湖中的数据？  2941
【软件正版化】软件正版化工作要点  2860
统信UOS试玩黑神话：悟空  2819
信刻光盘安全隔离与信息交换系统  2712
镜舟科技与中启乘数科技达成战略合作，共筑数据服务新生态  1246
grub引导程序无法找到指定设备和分区  1213
华为全联接大会2024丨软通动力分论坛精彩议程抢先看！  163
点击报名 | 京东2025校招进校行程预告  162
2024海洋能源产业融合发展论坛暨博览会同期活动-海洋能源与数字化智能化论坛成功举办  160
华为纯血鸿蒙正式版9月底见！但Mate 70的内情还得接着挖...  157
本周热议
我的信创开放社区兼职赚钱历程 40
今天你签到了吗？ 27
信创开放社区邀请他人注册的具体步骤如下 15
如何玩转信创开放社区—从小白进阶到专家 15
方德桌面操作系统 14
我有15积分有什么用? 13
用抖音玩法闯信创开放社区——用平台宣传企业产品服务 13
如何让你先人一步获得悬赏问题信息？（创作者必看） 12
2024中国信创产业发展大会暨中国信息科技创新与应用博览会 9
中央国家机关政府采购中心：应当将CPU、操作系统符合安全可靠测评要求纳入采购需求 8
热门标签更多

加入交流群

请使用微信扫一扫!