鸿蒙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插件提供的框架，构建了协议提醒页的基础代码，最终显示效果如下所示：