为了账号安全,请及时绑定邮箱和手机立即绑定

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


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

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

1.协议页内容

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

https://img1.sycdn.imooc.com/6720bbcf0001358806240738.jpg

2.构建协议页面

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

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

https://img1.sycdn.imooc.com/6720bbd0000174eb03720452.jpg

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

https://img1.sycdn.imooc.com/6720bbd00001338611842556.jpg


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消