Flutter40.Opensource China Find界面跳转开源众包界面webview(12)

discovery_page.dart

import 'package:flutter/material.dart';

import 'common_web_page.dart';

/**
 * 主界面find
 */
class DiscoveryPage extends StatefulWidget {
  @override
  _DiscoveryPageState createState() => _DiscoveryPageState();
}

class _DiscoveryPageState extends State<DiscoveryPage> {
  List<Map<String, IconData>> blocks = [
    {
      '开源众包': Icons.pageview,
      '开源软件': Icons.speaker_notes_off,
      '码云推荐': Icons.screen_share,
      '代码骗贷': Icons.assignment,
    },
    {
      '扫一扫': Icons.camera_alt,
      '摇一摇': Icons.camera,
    },
    {
      '码云封面人物': Icons.person,
      '线下活动': Icons.android,
    }
  ];

  void _handleItemClick(String title) {
    switch (title) {
      case '开源众包':
        _navToWebPage(title, 'https://zb.oschina.net/');
        break;
      case '扫一扫':
//        scan();
        break;
      case '摇一摇':
//        Navigator.of(context)
//            .push(MaterialPageRoute(builder: (context) => ShakePage()));
        break;
    }
  }

  void _navToWebPage(String title, String url) {
    if (title != null && url != null) {
      Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => CommonWebPage(
            title: title,
            url: url,
          )));
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: blocks.length,
      itemBuilder: (context, bolockIndex) {
        return Container(
          margin: const EdgeInsets.symmetric(vertical: 10.0),
          //线条边框设置
          decoration: BoxDecoration(
            border: Border(
              top: BorderSide(
                width: 1.0,
                color: Color(0xffaaaaaa),
              ),
              bottom: BorderSide(
                width: 1.0,
                color: Color(0xffaaaaaa),
              ),
            ),
          ),
          //listview嵌套，自带分割线。3个子模块
          child: ListView.separated(
            physics: NeverScrollableScrollPhysics(),//滑动冲突
            shrinkWrap: true,//显示完全
            itemBuilder: (context, mapIndex) {
              //InkWell有点击效果
              return InkWell(
                //点击事件
                onTap: (){
                  _handleItemClick(
                      blocks[bolockIndex].keys.elementAt(mapIndex));
                },
                //listview单个条目的布局
                child: Container(
                  height: 60.0,
                  child: ListTile(
                    leading: Icon(
                        blocks[bolockIndex].values.elementAt(mapIndex)),
                    title:
                    Text(blocks[bolockIndex].keys.elementAt(mapIndex)),
                    trailing: Icon(Icons.arrow_forward_ios),
                  ),
                ),
              );
            },
            //子listview的分隔线
            separatorBuilder: (context, mapIndex) {
              return Divider(
                height: 2.0,
                color: Color(0xffff0000),
              );
            },
              //子listview的数量是各个block的
            itemCount: blocks[bolockIndex].length),
        );
      }
    );
  }
}

common_web_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:flutterapp2/constants/Constants.dart';

class CommonWebPage extends StatefulWidget {
  final String title;
  final String url;

  //构造函数
  CommonWebPage({Key key, this.title, this.url})
      : assert(title != null),
        assert(url != null),
        super(key: key);

  @override
  _CommonWebPageState createState() => _CommonWebPageState();
}

class _CommonWebPageState extends State<CommonWebPage> {
  bool isLoading = true;
  //展示webview
  FlutterWebviewPlugin _flutterWebviewPlugin = FlutterWebviewPlugin();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //监听url变化
    _flutterWebviewPlugin.onStateChanged.listen((state) {
      if(state.type == WebViewState.finishLoad){
        if (!mounted) return;
        setState(() {
          isLoading = false;
        });
      }else  if(state.type == WebViewState.startLoad){
        if (mounted) {
          setState(() {
            isLoading = true;
          });
        }
      }

    });
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> _appBarTitle = [
      Text(
        widget.title,
        style: TextStyle(
          color: Color(AppColors.APPBAR),
        ),
      ),
    ];
    if (isLoading) {
      _appBarTitle.add(SizedBox(
        width: 10.0,
      ));
      _appBarTitle.add(CupertinoActivityIndicator());
    }
    return WebviewScaffold(
      url: widget.url,
      appBar: AppBar(
        title: Row(
          children: _appBarTitle,
        ),
        iconTheme: IconThemeData(color: Color(AppColors.APPBAR)), //0412 added
      ),
      withJavascript: true,
      //允许执行js
      withLocalStorage: true,
      //允许本地存储
      withZoom: true, //允许网页缩放
    );
  }
}

效果图