鴻蒙NEXT+Flutter開發(fā)9-實(shí)現(xiàn)協(xié)議提醒頁B
上篇文章中講述了協(xié)議頁面的基本框架代碼，接下來將呈現(xiàn)頁面的實(shí)現(xiàn)細(xì)節(jié)。
1.構(gòu)建logo圖標(biāo)
頁面的最上方放置應(yīng)用的logo，為提升顯示效果，為logo加入陰影，具體實(shí)現(xiàn)代碼為：
// logo
? Widget _buildLogo() {
? ? return Container(
? ? ? width: 144,
? ? ? margin: const EdgeInsets.only(top: (60)),
? ? ? child: Column(
? ? ? ? crossAxisAlignment: CrossAxisAlignment.center,
? ? ? ? children: [
? ? ? ? ? Container(
? ? ? ? ? ? height: 96,
? ? ? ? ? ? width: 96,
? ? ? ? ? ? decoration: const BoxDecoration(
? ? ? ? ? ? ? color: Color.fromARGB(255, 255, 255, 255),
? ? ? ? ? ? ? boxShadow: [
? ? ? ? ? ? ? ? BoxShadow(
? ? ? ? ? ? ? ? ? color: Color.fromARGB(37, 22, 22, 23),
? ? ? ? ? ? ? ? ? offset: Offset(5, 5),
? ? ? ? ? ? ? ? ? blurRadius: 5,
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ],
? ? ? ? ? ? ? borderRadius:
? ? ? ? ? ? ? ? ? BorderRadius.all(Radius.circular((96 * 0.5))), // 父容器的50%
? ? ? ? ? ? ),
? ? ? ? ? ? clipBehavior: Clip.antiAlias,
? ? ? ? ? ? child: Image.asset(
? ? ? ? ? ? ? "assets/images/logo.png",
? ? ? ? ? ? ? fit: BoxFit.fill,
? ? ? ? ? ? ),
? ? ? ? ? ),
? ? ? ? ],
? ? ? ),
? ? );
? }
2.構(gòu)建標(biāo)題和文字
通過_buildPageHeadTitle和_buildPageHeaderDetail兩個(gè)函數(shù)來完成文字部分的構(gòu)建，實(shí)現(xiàn)代碼如下：
/// 頁頭標(biāo)題
? Widget _buildPageHeadTitle() {
? ? return Container(
? ? ? margin: const EdgeInsets.only(top: 40),
? ? ? child: const Text(
? ? ? ? "溫馨提醒",
? ? ? ? textAlign: TextAlign.center,
? ? ? ? style: TextStyle(
? ? ? ? ? fontWeight: FontWeight.normal,
? ? ? ? ? fontSize: 24,
? ? ? ? ? height: 1,
? ? ? ? ),
? ? ? ),
? ? );
? }
? /// 頁頭說明
? Widget _buildPageHeaderDetail(BuildContext context) {
? ? return Container(
? ? ? margin: const EdgeInsets.only(top: 20, bottom: 20),
? ? ? child: Column(
? ? ? ? crossAxisAlignment: CrossAxisAlignment.start,
? ? ? ? children: <Widget>[
? ? ? ? ? const Text(
? ? ? ? ? ? '? ? 歡迎使用鴻蒙NEXT版演示1!',
? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? fontSize: 16,
? ? ? ? ? ? ),
? ? ? ? ? ),
? ? ? ? ? const SizedBox(height: 5),
? ? ? ? ? Text.rich(TextSpan(children: [
? ? ? ? ? ? const TextSpan(
? ? ? ? ? ? ? text: '? ? 為了更好地保護(hù)您的權(quán)益，同時(shí)遵守相關(guān)監(jiān)管的要求，請(qǐng)?jiān)谑褂们安殚?,
? ? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? ? fontSize: 16,
? ? ? ? ? ? ? ),
? ? ? ? ? ? ),
? ? ? ? ? ? TextSpan(
? ? ? ? ? ? ? ? text: '《隱私政策》',
? ? ? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? ? ? color: Theme.of(context).primaryColor,
? ? ? ? ? ? ? ? ? fontSize: 16,
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? recognizer: TapGestureRecognizer()
? ? ? ? ? ? ? ? ? ..onTap = () {
? ? ? ? ? ? ? ? ? ? UrlLauncher.launchInBrowser(
? ? ? ? ? ? ? ? ? ? ? ? "https://www.x x x x.com/privacy");
? ? ? ? ? ? ? ? ? }),
? ? ? ? ? ? TextSpan(
? ? ? ? ? ? ? ? text: '《用戶協(xié)議》',
? ? ? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? ? ? color: Theme.of(context).primaryColor,
? ? ? ? ? ? ? ? ? fontSize: 16,
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? recognizer: TapGestureRecognizer()
? ? ? ? ? ? ? ? ? ..onTap = () {
? ? ? ? ? ? ? ? ? ? UrlLauncher.launchInBrowser(
? ? ? ? ? ? ? ? ? ? ? ? "https://www.x x x x.com/vip");
? ? ? ? ? ? ? ? ? }),
? ? ? ? ? ? const TextSpan(
? ? ? ? ? ? ? text: '，并向您特別說明如下：',
? ? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? ? fontSize: 16,
? ? ? ? ? ? ? ),
? ? ? ? ? ? ),
? ? ? ? ? ])),
? ? ? ? ? const SizedBox(height: 5),
? ? ? ? ? const Text(
? ? ? ? ? ? '? ? 為向您提供服務(wù)并保障賬號(hào)安全 ，我們會(huì)申請(qǐng)系統(tǒng)權(quán)限收集設(shè)備信息。',
? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? fontSize: 16,
? ? ? ? ? ? ),
? ? ? ? ? ),
? ? ? ? ? const SizedBox(height: 5),
? ? ? ? ? const Text(
? ? ? ? ? ? '? ? 點(diǎn)擊[同意并繼續(xù)]按鈕代表您已同意前述協(xié)議。',
? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? fontSize: 16,
? ? ? ? ? ? ),
? ? ? ? ? ),
? ? ? ? ],
? ? ? ),
? ? );
? }
3.構(gòu)建操作按鈕
// 不同意
? Widget _buildRejectButton(BuildContext context) {
? ? return SizedBox(
? ? ? width: double.maxFinite,
? ? ? height: 44,
? ? ? child: TextButton(
? ? ? ? onPressed: () {
? ? ? ? ? showPrivacyDialog(context);
? ? ? ? },
? ? ? ? child: const Text('不同意'),
? ? ? ),
? ? );
? }
? // 同意
? Widget _buildAcceptButton(BuildContext context) {
? ? return SizedBox(
? ? ? width: double.maxFinite,
? ? ? height: 44,
? ? ? child: ElevatedButton(
? ? ? ? onPressed: controller.handleAccepted,
? ? ? ? child: const Text('同意并繼續(xù)'),
? ? ? ),
? ? );
? }
通過前面的步驟，協(xié)議提醒頁的代碼基本實(shí)現(xiàn)完成。其中《隱私政策》和《用戶協(xié)議》兩項(xiàng)內(nèi)容，是通過打開外部連接，來呈現(xiàn)具體內(nèi)容的。如何在鴻蒙NEXT系統(tǒng)下，實(shí)現(xiàn)打開外部連接，將在接下來的文章中，進(jìn)行具體講解。
