Svelte Native 项目教程：构建一个完整的待办事项应用-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00536/article/details/148944378

Svelte Native 项目教程：构建一个完整的待办事项应用

前言

本文将带领读者使用 Svelte Native 框架开发一个功能完善的待办事项应用。Svelte Native 是一个结合了 Svelte 框架和 NativeScript 的移动应用开发方案，它允许开发者使用熟悉的 Svelte 语法来构建原生移动应用。

项目概述

我们将构建一个具有以下功能的待办事项应用：

双标签页布局设计
任务添加功能
任务完成与删除功能
已完成任务查看功能
美观的界面样式

环境准备

在开始之前，请确保：

已安装 Node.js 环境
已完成 Svelte Native 的初始设置
对 Svelte 框架有基本了解

基础布局搭建

首先创建一个基本的双标签页布局：

<page>
    <actionBar title="我的任务" />
    
    <tabView>
        <tabViewItem title="待办">
            <label textWrap="true">这里将显示待办任务列表</label>
        </tabViewItem>
        <tabViewItem title="已完成">
            <label textWrap="true">这里将显示已完成任务</label>
        </tabViewItem>
    </tabView>
</page>

布局解析

<page>：应用的顶级容器，相当于网页中的 <html> 标签
<actionBar>：顶部导航栏，显示应用标题
<tabView>：标签页容器，包含多个 <tabViewItem>
<tabViewItem>：单个标签页内容

添加任务功能实现

接下来我们实现任务添加功能：

<gridLayout columns="*,120" rows="70,*">
    <textField col="0" row="0" bind:text={textFieldValue} 
               hint="输入新任务..." editable="true"
               on:returnPress={onButtonTap} />
    <button col="1" row="0" text="添加" on:tap={onButtonTap} class="-primary" />
    
    <listView items={todos} on:itemTap={onItemTap} row="1" colSpan="2">
        <Template let:item>
            <label text={item.name} textWrap="true" />
        </Template>
    </listView>
</gridLayout>

功能逻辑实现

let todos = []
let textFieldValue = ""

function onButtonTap() {
    if (!textFieldValue.trim()) return;
    todos = [{ name: textFieldValue }, ...todos]
    textFieldValue = ""
}

布局说明

我们使用 <gridLayout> 实现了响应式布局：

第一行：输入框和按钮
第二行：任务列表
columns="*,120" 表示第一列自适应，第二列固定120dp
rows="70,*" 表示第一行固定70dp，第二行自适应

任务管理功能

实现任务的完成与删除功能：

let dones = []

async function onItemTap(args) {
    const result = await action("操作选项", "取消", [
        "标记为已完成",
        "永久删除"
    ]);
    
    const item = todos[args.index]
    switch (result) {
        case "标记为已完成":
            dones = [item, ...dones]
            todos = todos.filter(t => t !== item)
            break;
        case "永久删除":
            todos = todos.filter(t => t !== item)
            break;
    }
}

已完成任务界面

为已完成标签页添加列表展示：

<listView items={dones} on:itemTap={onDoneTap}>
    <Template let:item>
        <label text={item.name} class="completed-task" textWrap="true" />
    </Template>
</listView>

对应的操作处理：

async function onDoneTap(args) {
    const result = await action("操作选项", "取消", [
        "重新标记为待办",
        "永久删除"
    ]);
    
    const item = dones[args.index]
    switch (result) {
        case "重新标记为待办":
            todos = [item, ...todos]
            dones = dones.filter(t => t !== item)
            break;
        case "永久删除":
            dones = dones.filter(t => t !== item)
            break;
    }
}

界面美化

为应用添加样式提升用户体验：

textField {
    font-size: 20;
    padding: 12;
}

label {
    font-size: 18;
    padding: 12;
}

.completed-task {
    color: #939393;
    text-decoration: line-through;
}

button.-primary {
    font-weight: bold;
}