完成详情页以及列表页的跳转

lib/modules/account/account_page.dart

@@ -30,7 +30,8 @@ class AccountPage extends GetView<AccountController> {
           Container(
             height: 200.h,
             alignment: Alignment.center,
-            child: ClipOval(
+            child: CircleAvatar(
+              radius: 54,
               child: Image.asset(
                 "assets/images/account_header.png",
                 height: 108,

lib/modules/category/widgets/news_item.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:get/get.dart';
 import 'package:news_getx/data/model/news.dart';
 import 'package:news_getx/modules/widgets/image.dart';
+import 'package:news_getx/routes/app_pages.dart';
 import 'package:news_getx/theme/app_colors.dart';
 import 'package:news_getx/utils/date.dart';
 
@@ -23,6 +25,7 @@ class NewsListItem extends StatelessWidget {
           InkWell(
             onTap: () {
               // 到详情页
+              Get.toNamed(AppRoutes.Detail, arguments: newsItem);
             },
             child: SizedBox(
               width: 121.w,
@@ -58,6 +61,7 @@ class NewsListItem extends StatelessWidget {
                 InkWell(
                   onTap: () {
                     // 到详情页
+                    Get.toNamed(AppRoutes.Detail, arguments: newsItem);
                   },
                   child: Container(
                     margin: EdgeInsets.only(top: 10.h),

lib/modules/detail/detail_controller.dart

@@ -26,7 +26,6 @@ class DetailController extends GetxController {
     webViewController.addJavaScriptChannel(
       'Invoke',
       onMessageReceived: (JavaScriptMessage message) {
-        print(message.message);
         var webHeight = double.tryParse(message.message);
         if (webHeight != null) {
           webViewHeight.value = webHeight;
@@ -35,23 +34,26 @@ class DetailController extends GetxController {
     );
   }
 
-
   // 获取页面高度
   _getWebViewHeight() async {
-    // await (await webViewController.future)?.evaluateJavascript('''
+    // 一直变动高度的 设置最大高度变更次数
-    //     try {
+    await webViewController.runJavaScript("""
-    //       // Invoke.postMessage([document.body.clientHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight]);
+      // 设置最大高度变更次数
-    //       let scrollHeight = document.documentElement.scrollHeight;
+      let retryNum = 3;
-    //       if (scrollHeight) {
+      const resizeObserver = new ResizeObserver(entries => {
-    //         Invoke.postMessage(scrollHeight);
+        if (retryNum > 0) {
-    //       }
+          Invoke.postMessage(document.documentElement.scrollHeight.toString());
-    //     } catch {}
+          retryNum -= 1;
-    //     ''');
+        }
+      });
+      resizeObserver.observe(document.body);
+    """);
   }
 
   void initWebController() {
+    // 控制器设置
     webViewController.setJavaScriptMode(JavaScriptMode.unrestricted);
-    webViewController.setBackgroundColor(Colors.black);
+    webViewController.setBackgroundColor(Colors.transparent);
     webViewController.setNavigationDelegate(NavigationDelegate(
       onProgress: (int progress) {},
       onPageStarted: (String url) {},
@@ -61,8 +63,8 @@ class DetailController extends GetxController {
       },
       onWebResourceError: (WebResourceError error) {},
       onNavigationRequest: (NavigationRequest request) {
-        // if (request.url != '$ServerApiUrl/news/content/${state.item.id}') {
+        // 限制内部导航的url
-        if (request.url != 'https://www.youtube.com/') {
+        if (request.url != '$ServerApiUrl/news/content/${state.item.id}') {
           return NavigationDecision.prevent;
         }
         return NavigationDecision.navigate;
@@ -77,12 +79,12 @@ class DetailController extends GetxController {
   void onInit() {
     super.onInit();
     NewsItem newsItem = Get.arguments;
-    print(newsItem);
     state.item = newsItem;
-
     // 初始化WebViewController信息
     initWebController();
-    const url = "https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fmbd.baidu.com%252Fnewspage%252Fdata%252Flandingpage%253Fs_type%253Dnews%2526dsp%253Dwise%2526context%253D%25257B%252522nid%252522%25253A%252522news_9417572788407561368%252522%25257D%2526pageType%253D1%2526n_type%253D1%2526p_from%253D-1%2526rec_src%253D52%2526innerIframe%253D1%2526browserId%253D25%2522%252C%2522isThird%2522%253Afalse%252C%2522title%2522%253Anull%257D%257D";
+    // TODO 如果遇到页面是固定100vh的，那么获取到的高度就是初始的SizeBox的高度
-    webViewController.loadRequest(Uri.parse(url));
+    // const url = "https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fmbd.baidu.com%252Fnewspage%252Fdata%252Flandingpage%253Fs_type%253Dnews%2526dsp%253Dwise%2526context%253D%25257B%252522nid%252522%25253A%252522news_9417572788407561368%252522%25257D%2526pageType%253D1%2526n_type%253D1%2526p_from%253D-1%2526rec_src%253D52%2526innerIframe%253D1%2526browserId%253D25%2522%252C%2522isThird%2522%253Afalse%252C%2522title%2522%253Anull%257D%257D";
+    // const url = "https://blog.csdn.net/m0_55635384/article/details/129020261";
+    webViewController.loadRequest(Uri.parse(newsItem.url!));
   }
 }

lib/modules/detail/detail_page.dart

@@ -1,8 +1,13 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
+import 'package:loading_animations/loading_animations.dart';
 import 'package:news_getx/modules/widgets/app_bar.dart';
+import 'package:news_getx/modules/widgets/image.dart';
 import 'package:news_getx/theme/app_colors.dart';
+import 'package:news_getx/utils/date.dart';
 import 'package:webview_flutter/webview_flutter.dart';
+
 import 'detail_controller.dart';
 
 class DetailPage extends GetView<DetailController> {
@@ -11,63 +16,190 @@ class DetailPage extends GetView<DetailController> {
   // 顶部导航
   AppBar _buildAppBar() {
     return transparentAppBar(
-        leading: IconButton(
+      leading: IconButton(
+        onPressed: () {
+          Get.back();
+        },
+        icon: Icon(
+          Icons.arrow_back,
+          color: AppColors.primaryText,
+        ),
+      ),
+      actions: [
+        IconButton(
           onPressed: () {},
           icon: Icon(
-            Icons.arrow_back,
+            Icons.bookmark_border,
             color: AppColors.primaryText,
           ),
         ),
-        actions: [
+        IconButton(
-          IconButton(
+          onPressed: () {},
-            onPressed: () {},
+          icon: Icon(
-            icon: Icon(
+            Icons.share,
-              Icons.bookmark_border,
+            color: AppColors.primaryText,
-              color: AppColors.primaryText,
-            ),
           ),
-          IconButton(
+        ),
-            onPressed: () {},
+      ],
-            icon: Icon(
+    );
-              Icons.share,
-              color: AppColors.primaryText,
-            ),
-          ),
-        ]);
   }
 
   Widget _buildPageTitle() {
-    return Text('data');
+    return Container(
+      margin: EdgeInsets.all(10.w),
+      child: Row(
+        children: [
+          Column(
+            children: <Widget>[
+              // 标题
+              Text(
+                controller.state.item.category ?? "--",
+                style: TextStyle(
+                  fontFamily: "Montserrat",
+                  fontWeight: FontWeight.normal,
+                  fontSize: 30.sp,
+                  color: AppColors.thirdElement,
+                ),
+              ),
+              // 作者
+              Text(
+                controller.state.item.author ?? "--",
+                style: TextStyle(
+                  fontFamily: "Avenir",
+                  fontWeight: FontWeight.normal,
+                  fontSize: 14.sp,
+                  color: AppColors.thirdElementText,
+                ),
+              ),
+            ],
+          ),
+          Spacer(),
+          // 标志
+          CircleAvatar(
+            // 头像半径
+            radius: 22.w,
+            backgroundImage: AssetImage("assets/images/channel-fox.png"),
+          )
+        ],
+      ),
+    );
   }
 
   Widget _buildPageHeader() {
-    return Text('data');
+    return Container(
+      margin: EdgeInsets.all(10.w),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // 图
+          netImageCached(
+            controller.state.item.thumbnail!,
+            width: 335,
+            height: 290,
+          ),
+          // 标题
+          Container(
+            margin: EdgeInsets.only(top: 10.h),
+            child: Text(
+              controller.state.item.title!,
+              style: TextStyle(
+                fontFamily: 'Montserrat',
+                fontWeight: FontWeight.w600,
+                color: AppColors.primaryText,
+                fontSize: 24.sp,
+                height: 1,
+              ),
+            ),
+          ),
+
+          // 一行三列
+          Container(
+            margin: EdgeInsets.only(top: 10.h),
+            child: Row(
+              children: [
+                // 分类
+                ConstrainedBox(
+                  constraints: const BoxConstraints(
+                    maxWidth: 120,
+                  ),
+                  child: Text(
+                    controller.state.item.category!,
+                    style: TextStyle(
+                      fontFamily: 'Avenir',
+                      fontWeight: FontWeight.normal,
+                      color: AppColors.secondaryElementText,
+                      fontSize: 14.sp,
+                      height: 1,
+                    ),
+                    overflow: TextOverflow.clip,
+                    maxLines: 1,
+                  ),
+                ),
+                // 添加时间
+                SizedBox(
+                  width: 15.w,
+                ),
+                ConstrainedBox(
+                  constraints: const BoxConstraints(
+                    maxWidth: 120,
+                  ),
+                  child: Text(
+                    '• ${timeLineFormat(controller.state.item.addtime ?? DateTime(0))}',
+                    style: TextStyle(
+                      fontFamily: 'Avenir',
+                      fontWeight: FontWeight.normal,
+                      color: AppColors.thirdElementText,
+                      fontSize: 14.sp,
+                      height: 1,
+                    ),
+                    overflow: TextOverflow.clip,
+                    maxLines: 1,
+                  ),
+                ),
+              ],
+            ),
+          )
+        ],
+      ),
+    );
   }
 
   Widget _buildWebView() {
-    return WebViewWidget(
+    return Obx(() {
-      controller: controller.webViewController,
+      return SizedBox(
-    );
+        height: controller.webViewHeight.value,
+        child: WebViewWidget(
+          controller: controller.webViewController,
+        ),
+      );
+    });
   }
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: _buildAppBar(),
-      body: _buildWebView(),
+      body: Stack(
-    );
+        children: [
-
+          SingleChildScrollView(
-    return Scaffold(
+            child: Column(
-      appBar: _buildAppBar(),
+              children: [
-      body: SingleChildScrollView(
+                _buildPageTitle(),
-        child: Column(
+                Divider(height: 1),
-          children: [
+                _buildPageHeader(),
-            _buildPageTitle(),
+                _buildWebView(),
-            Divider(height: 1),
+              ],
-            _buildPageHeader(),
+            ),
-            _buildWebView(),
+          ),
-          ],
+          Obx(() {
-        ),
+            return controller.isPageFinished.isTrue
+                ? Container()
+                : Align(
+                    alignment: Alignment.center,
+                    child: LoadingBouncingGrid.square(),
+                  );
+          })
+        ],
       ),
     );
   }

lib/modules/main/widgets/news_list.dart

@@ -5,6 +5,7 @@ import 'package:news_getx/data/model/news.dart';
 import 'package:news_getx/modules/main/main_controller.dart';
 import 'package:news_getx/modules/main/widgets/ad.dart';
 import 'package:news_getx/modules/widgets/image.dart';
+import 'package:news_getx/routes/app_pages.dart';
 import 'package:news_getx/theme/app_colors.dart';
 import 'package:news_getx/utils/date.dart';
 
@@ -20,7 +21,7 @@ class NewsListWidget extends GetView<MainController> {
           // 左侧图
           InkWell(
             onTap: () {
-              // 到详情页
+              Get.toNamed(AppRoutes.Detail, arguments: item);
             },
             child: SizedBox(
               width: 121.w,
@@ -56,6 +57,7 @@ class NewsListWidget extends GetView<MainController> {
                 InkWell(
                   onTap: () {
                     // 到详情页
+                    Get.toNamed(AppRoutes.Detail, arguments: item);
                   },
                   child: Container(
                     margin: EdgeInsets.only(top: 10.h),
@@ -129,7 +131,8 @@ class NewsListWidget extends GetView<MainController> {
                       ),
                     ],
                   ),
-                ),              ],
+                ),
+              ],
             ),
           ),
         ],