鴻蒙NEXT+Flutter開發(fā)8-實(shí)現(xiàn)協(xié)議提醒頁A
為了確保應(yīng)用的使用符合相關(guān)法律法規(guī)要求，明確告知用戶其在使用應(yīng)用過程中的權(quán)利和義務(wù)。需要通過清晰展示用戶協(xié)議內(nèi)容，讓用戶了解應(yīng)用的數(shù)據(jù)處理方式、服務(wù)條款等重要信息，增強(qiáng)用戶對(duì)應(yīng)用的信任。所以在用戶開始使用應(yīng)用之前，獲取用戶對(duì)用戶協(xié)議的明確同意，以建立合法有效的使用關(guān)系。
1.協(xié)議頁內(nèi)容
具體協(xié)議內(nèi)容，可以借鑒常見APP的內(nèi)容，再根據(jù)自己的實(shí)際情況調(diào)整而來。比如中百度中搜索“app啟動(dòng)用戶協(xié)議頁”，查看對(duì)應(yīng)圖片，就會(huì)發(fā)現(xiàn)很多用戶協(xié)議相關(guān)的圖片。下圖是百度App相關(guān)頁面的截圖：
2.構(gòu)建協(xié)議頁面
我們根據(jù)百度App的頁面，構(gòu)建我們自己的用戶協(xié)議頁面。我們?nèi)匀皇褂肎etX插件來實(shí)現(xiàn)相關(guān)功能。
首先中l(wèi)ib目錄下新建pages目錄，用于存放app的所有頁面。新建welcome目錄，用于存放用戶協(xié)議的提醒頁面文件。目錄結(jié)構(gòu)如下圖所示：
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();
? // 同意協(xié)議，跳轉(zhuǎn)到主頁面
? 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插件提供的框架，構(gòu)建了協(xié)議提醒頁的基礎(chǔ)代碼，最終顯示效果如下所示：
