3. 单页App

简介: 3. 单页App

上一篇文章我们创建了 Xamarin 应用程序,当我们创建完应用程序后 VS 2019 帮我们生成了一个名为 MainPage 的 xaml 文件,这个文件在当前项目中是仅有的页面,我们称这个应用程序称为 单页应用程序 。下面我们就修改一下上一篇文章所创建的应用程序。首先我们打开 MainPage.xaml 文件,将模板中的代码修改为如下形式:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Notes.MainPage">
    <StackLayout Margin="10,35,10,10">
        <Label Text="Notes" HorizontalOptions="Center" FontAttributes="Bold"/>
        <Editor x:Name="editor" Placeholder="输入笔记内容" HeightRequest="100"/>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button Text="保存" x:Name="SaveButton" Clicked="SaveButton_Clicked"/>
            <Button Grid.Column="1" Text="删除" x:Name="DeleteButton" Clicked="DeleteButton_Clicked"/>
        </Grid>
    </StackLayout>
</ContentPage>

上述代码定义了用户界面,界面中包含 一个 Label 控件、一个文本输入控件、两个按钮控件。其中两个按钮控件水平放置在了 Grid 中,并且给这两个按钮绑定了保存和删除事件。


Note:上述控件我将在后面进行详细讲解。


打开 MainPage.xaml.cs 文件,我们编写刚才给两个按钮绑定的两个事件,首先我们先编写保存事件 SaveButton_Clicked ,这个事件将会在保存按钮被点击的时候会将文本输入控件中的内容保存到本地文件中。

private void SaveButton_Clicked(object sender, EventArgs e)
{
    File.WriteAllText(filename,editor.Text);
}

接下来我们编写删除事件 DeleteButton_Clicked ,该方法会删除本地文件并清空文本输入控件中的内容。

private void DeleteButton_Clicked(object sender, EventArgs e)
{
    if (File.Exists(filename))
    {
        File.Delete(filename);
    }
    editor.Text = string.Empty;
}

在上述两段代码中我们一直在使用 filename 这个变量,下面我们就将这个变量定义出来。

string filename = Path.Combine(Environment.GetFolderPath(
    Environment.SpecialFolder.LocalApplicationData),"note.nt");
public MainPage()
{
    InitializeComponent();
    if(File.Exists(filename))
    {
        editor.Text = File.ReadAllText(filename);
    }
}

到这里我们已经将 Notes app 的基础代码编写完成,下面我们就运行一下这个 app 看一下效果。

1.png

我们填写要保存的内容然后单击保存按钮,我们所填写的内容将会被保存在本地文件 note.nt 中。当我们退出应用程序再次进入后,将会把保存在文件中的内容显示在文本输入控件中。我们点击删除按钮将删除文件并清空文本输入控件。

目录
相关文章
|
移动开发 API
Uniapp解决app和H5跨域问题
Uniapp解决app和H5跨域问题
1846 0
Uniapp解决app和H5跨域问题
|
6月前
|
开发者
如何在线生成App:将网页封装成APP
在移动化的时代,许多企业和个人都希望拥有自己的移动应用程序,但是开发一款优秀的APP需要耗费大量的时间和金钱。而现在,通过在线生成App的方式,我们可以将自己的网页轻松封装成APP,从而实现快速上线。
|
4月前
|
运维 Android开发 开发者
你知道APP是怎么开发的吗?
【7月更文挑战第9天】你知道APP是怎么开发的吗?
|
6月前
|
移动开发 前端开发 Android开发
分享200个App移动端模板
分享200个App移动端模板
126 0
|
小程序 安全 测试技术
浅谈 微信小程序 与 APP 应用的结合
浅谈 微信小程序 与 APP 应用的结合
375 0
|
JSON 前端开发 Java
移动端App 4|学习笔记
快速学习移动端App 4
173 0
移动端App 4|学习笔记
|
存储 前端开发 JavaScript
移动端App 3|学习笔记
快速学习移动端App 3
171 0
移动端App 3|学习笔记
|
前端开发 小程序 JavaScript
移动端 App 1|学习笔记
快速学习移动端 App 1
171 0
移动端 App 1|学习笔记
|
移动开发 前端开发 Java
移动端App 2|学习笔记
快速学习移动端App 2
移动端App 2|学习笔记
|
JSON 前端开发 安全
移动端APP5|学习笔记
快速学习移动端APP5
174 0
移动端APP5|学习笔记