鸿蒙NEXT+Flutter开发8-实现协议提醒页A

鸿蒙NEXT+Flutter开发8-实现协议提醒页A

为了确保应用的使用符合相关法律法规要求,明确告知用户其在使用应用过程中的权利和义务。需要通过清晰展示用户协议内容,让用户了解应用的数据处理方式、服务条款等重要信息,增强用户对应用的信任。所以在用户开始使用应用之前,获取用户对用户协议的明确同意,以建立合法有效的使用关系。

1.协议页内容

具体协议内容,可以借鉴常见APP的内容,再根据自己的实际情况调整而来。比如中百度中搜索“app启动用户协议页”,查看对应图片,就会发现很多用户协议相关的图片。下图是百度App相关页面的截图:

2.构建协议页面

我们根据百度App的页面,构建我们自己的用户协议页面。我们仍然使用GetX插件来实现相关功能。

首先中lib目录下新建pages目录,用于存放app的所有页面。新建welcome目录,用于存放用户协议的提醒页面文件。目录结构如下图所示:

3.页面代码解析

binding.dart

完成controller和page页面的绑定,其代码如下:

import 'package:get/get.dart';

import 'controller.dart';

class WelcomeBinding implements Bindings {

  @override

  void dependencies() {

    Get.lazyPut<WelcomeController>(() => WelcomeController());

  }

}

controller.dart

处理同意按钮的逻辑功能,代码如下:

import '/common/routers/routes.dart';

import '/common/store/store.dart';

import 'package:get/get.dart';

class WelcomeController extends GetxController {

  WelcomeController();

  // 同意协议,跳转到主页面

  handleAccepted() async {

    await ConfigStore.to.saveAlreadyOpen();

    Get.offAllNamed(AppPages.keyApplication);

  }

}

index.dart

为了方便引用,代码为:

library welcome;

export 'controller.dart';

export 'bindings.dart';

export 'view.dart';

view.dart

import 'package:flutter/gestures.dart';

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

import 'package:get/get.dart';

import '/common/utils/utils.dart';

import 'index.dart';

class WelcomePage extends GetView<WelcomeController> {

  const WelcomePage({super.key});

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: SafeArea(

        child: SingleChildScrollView(

          child: Center(

            child: Padding(

              padding: const EdgeInsets.all(40.0),

              child: Column(

                mainAxisAlignment: MainAxisAlignment.spaceEvenly,

                mainAxisSize: MainAxisSize.max,

                children: <Widget>[

                  _buildLogo(),

                  _buildPageHeadTitle(),

                  _buildPageHeaderDetail(context),

                  _buildRejectButton(context),

                  _buildAcceptButton(context),

                ],

              ),

            ),

          ),

        ),

      ),

    );

  }

}

通过前面的步骤,利用GetX插件提供的框架,构建了协议提醒页的基础代码,最终显示效果如下所示:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容