精华内容
参与话题
问答
  • Flutter html渲染

    千次阅读 2019-10-29 15:13:09
    引入flutter_html插件 pubspec.yaml文件中引入: dependencies: flutter_html: ^0.10.4 作用及使用 用来渲染html内容,如某些详情页面 参考网址:flutter_html 使用方式: import 'package:flutter_...

    引入flutter_html插件

    pubspec.yaml文件中引入:

    dependencies:
      flutter_html: ^0.10.4

    作用及使用

    用来渲染html内容,如某些详情页面

    1. 参考网址:flutter_html
    2. 使用方式:

       import 'package:flutter_html/flutter_html.dart';
      
       // 渲染html内容代码
       child: Html(data: htmlStr),   // htmlStr为html字符串,一般从后台返回

     

    欢迎加群讨论更多flutter相关问题(7天有效)如果失效,可加个人微信拉群

    展开全文
  • FLUTTER

    千次阅读 2018-12-06 16:11:28
    https://codelabs.flutter-io.cn/codelabs/first-flutter-app-pt1-cn/index.html#1 下载Flutter的SDK(https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-...

    安装FLUTTER

    Flutter中的Dart地址:.../flutter/bin/cache/dart-sdk

    官方教程:

    https://codelabs.flutter-io.cn/codelabs/first-flutter-app-pt1-cn/index.html#1
    下载Flutter的SDK(https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip)
    解压后配置好环境变量即可。

    配置IDE( Android Studio)

    查看Android Studio的版本:
    在这里插入图片描述
    在这里插入图片描述
    可以看到,这个版本是181开头的,我们去下载对应的flutter和dart插件:
    https://plugins.jetbrains.com/plugin/9212-flutter
    在这里插入图片描述
    下载181开头的即可,然后从磁盘安装插件。
    插件安装好后,会有如下展示,能创建flutter工程:
    在这里插入图片描述

    检查环境

    控制台执行:flutter doctor

    > flutter doctor
    Doctor summary (to see all details, run flutter doctor -v):
    [] Flutter (Channel stable, v1.0.0, on Microsoft Windows [Version 10.0.17134.407], locale zh-CN)
    [!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
        X Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
    [] Android Studio (version 3.2)
    

    可以看到有个X,表示这个是不通过的,可以运行这个命令flutter doctor --android-licenses,然后所有选择都选y通过。
    再执行 flutter doctor 就可以看到如下信息:

    flutter doctor
    Doctor summary (to see all details, run flutter doctor -v):
    [] Flutter (Channel stable, v1.0.0, on Microsoft Windows [Version 10.0.17134.407], locale zh-CN)
    [] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    [] Android Studio (version 3.2)
    

    新建Flutter项目

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    下一步后finish即可。

    运行项目

    1.启动虚拟机

    2.修改gradle配置文件

    修改android目录下的build.gradle文件:

    buildscript {
       repositories {
           maven { url 'https://maven.aliyun.com/repository/google' }
           maven { url 'https://maven.aliyun.com/repository/jcenter' }
           maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
       }
    
       dependencies {
           classpath 'com.android.tools.build:gradle:3.2.1'
       }
    }
    
    allprojects {
       repositories {
          maven { url 'https://maven.aliyun.com/repository/google' }
           maven { url 'https://maven.aliyun.com/repository/jcenter' }
           maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
       }
    }
    
    rootProject.buildDir = '../build'
    subprojects {
       project.buildDir = "${rootProject.buildDir}/${project.name}"
    }
    subprojects {
       project.evaluationDependsOn(':app')
    }
    
    task clean(type: Delete) {
       delete rootProject.buildDir
    }
    
    

    也就是修改对应的repositories中的内容。
    修改flutter解压文件中的flutter\packages\flutter_tools\gradle\flutter.gradle中repositories中的内容:

    buildscript {
        repositories {
            //google()
            //jcenter() 修改这里
    		maven { url 'https://maven.aliyun.com/repository/google' }
            maven { url 'https://maven.aliyun.com/repository/jcenter' }
            maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    
        }
        dependencies {
            classpath 'com.android.tools.build:gradle:3.2.1'
        }
    }
    

    运行项目即可,即可启动。

    展开全文
  • Flutter

    2020-11-27 21:37:22
    Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit ...
  • 自从Flutter官网发布第一版就开始接触了,中间有1年多没有接触,因为当初考虑这是新的技术框架,还是比较开好原生开发。时代变化的浪潮中,谁也无法预料未来谁会成为未来技术的主流,是语言还是莫某框架,有未可知。...

    纸上得来终觉浅,绝知此事要躬行。——陆游

    自从Flutter官网发布第一版就开始接触了,中间有1年多没有接触,因为当初考虑这是新的技术框架,还是比较开好原生开发。时代变化的浪潮中,谁也无法预料未来谁会成为未来技术的主流,是语言还是莫某框架,有未可知。

    最近着手用纯Flutter框架开发了一款 app,在开发的过程中也许遇到了和当年原生才出来的时候一样的坑,虽然坑不同,那也得去解决坑呀。当我们在技术的道路上着手解决了一系列问题,也许就是我们很自信的去和老板谈薪资的时候了。废话不多说了,我今天就遇到了两个问题:一个问题是Flutter编写的app在安卓和苹果机器上运行时加载htm标签内容需要显示加载的进度,第二个问题就是在两端机器上无法加载网页连接以http开头的网页。其实这两个问题都解决了,且听我慢慢道来。

    先说第一个问题,其实第二个问题不是要说的重点,第二个问题我在搜索引擎中找到了答案,哈哈

    实现后的效果:

                        

    加载内容:<img src="http开头图片地址" alt="图片">

    思路:

    1、监听网页开始加载、加载中、加载完成

    2、显示加载转圈提示

    3、加载完成取消加载转圈提示

    既然我们是使用的 flutter_html插件,为了能进一步实现我们想要的功能,首先得从插件源码进行粗略的观看了。

    我们不难发现是继承自一个绘制的UI页的状态包括被渲染的内容都是始终不变的Widget 。

    注意:有必要了解一下了解到了StatelessWidget和StatefullWidget的区别

    class Html extends StatelessWidget {
      Html({
        Key key,
        @required this.data,
        this.padding,
        this.backgroundColor,
        this.defaultTextStyle,
        this.onLinkTap,
        this.renderNewlines = false,
        this.customRender,
        this.customEdgeInsets,
        this.customTextStyle,
        this.customTextAlign,
        this.blockSpacing = 14.0,
        this.useRichText = true,
        this.onImageError,
        this.linkStyle = const TextStyle(
            decoration: TextDecoration.underline,
            color: Colors.blueAccent,
            decorationColor: Colors.blueAccent),
        this.shrinkToFit = false,
        this.imageProperties,
        this.onImageTap,
        this.showImages = true,
      }) : super(key: key);

    useRichText 表示是否使用富文本或者原始解析html方式,因为有图片和文本的加载我当选useRichText=true

    通过解析html标签节点的方式去加载不同htm内容l标签,今天主要讲包含img标签的。

    1、节点包括src、data:image、base64:

    2、点击包括src、asset:

    3、今天我遇到的也是要讲的,开头只是src :

     准备缓存图片:

    node.attributes['src']表示获取到的图片地址,例如:<img src="http开头图片地址" alt="图片">

     precacheImage(
                        NetworkImage(node.attributes['src']),
                        buildContext,
                        onError: onImageError ?? (_, __) {},
                      );

    Image.network()加载网络图片:

     frameBuilder 用于展示要加载的图片

    loadingBuilder 用于展示图片加载开始到完成整过过程任意可表示加载进度的控件,此部分在flutter_html插件中没有,是我今天对此插件进行改装后的代码。

    ImageChunkEvent loadingProgress表示加载的进度,表示没有加载或者加载完成,就不不需要展示加载的进度

    表示加载的进度条,可自定义 
    return Container(
                              width: ViewUtils.currentHeight(400.0),
                              height: ViewUtils.currentWidth(400.0),
                              alignment: Alignment.center,
                              child: NetLoadingDialog(
                                //requestCallBack: _register(),
                                outsideDismiss: false,
                              ),
                            );
     loadingBuilder: (BuildContext context, Widget child,
                              ImageChunkEvent loadingProgress) {
                            if (loadingProgress == null) return child;
                            return Container(
                              width: ViewUtils.currentHeight(400.0),
                              height: ViewUtils.currentWidth(400.0),
                              alignment: Alignment.center,
                              child: NetLoadingDialog(
                                //requestCallBack: _register(),
                                outsideDismiss: false,
                              ),
                            );
                          },
                        child: Image.network(
                          node.attributes['src'],
                          frameBuilder: (context, child, frame, _) {
                            if (node.attributes['alt'] != null && frame == null) {
                              return BlockText(
                                child: RichText(
                                  textAlign: TextAlign.center,
                                  text: TextSpan(
                                    text: node.attributes['alt'],
                                    style: nextContext.childStyle,
                                  ),
                                ),
                                shrinkToFit: shrinkToFit,
                              );
                            }
                            if (frame != null) {
                              return child;
                            }
                            return Container();
                          },
                          loadingBuilder: (BuildContext context, Widget child,
                              ImageChunkEvent loadingProgress) {
                            if (loadingProgress == null) return child;
                            return Container(
                              width: ViewUtils.currentHeight(400.0),
                              height: ViewUtils.currentWidth(400.0),
                              alignment: Alignment.center,
                              child: NetLoadingDialog(
                                //requestCallBack: _register(),
                                outsideDismiss: false,
                              ),
                            );
                          },
                          width: (width ?? -1) > 0 ? width : null,
                          height: (height ?? -1) > 0 ? height : null,
                          scale: imageProperties?.scale ?? 1.0,
                          matchTextDirection:
                              imageProperties?.matchTextDirection ?? false,
                          centerSlice: imageProperties?.centerSlice,
                          filterQuality:
                              imageProperties?.filterQuality ?? FilterQuality.low,
                          alignment: imageProperties?.alignment ?? Alignment.center,
                          colorBlendMode: imageProperties?.colorBlendMode,
                          fit: imageProperties?.fit,
                          color: imageProperties?.color,
                          repeat: imageProperties?.repeat ?? ImageRepeat.noRepeat,
                          semanticLabel: imageProperties?.semanticLabel,
                          excludeFromSemantics:
                              (imageProperties?.semanticLabel == null)
                                  ? true
                                  : false,
                        ),
                        onTap: () {
                          if (onImageTap != null) {
                            onImageTap(node.attributes['src']);
                          }
                        },
    

    最后使用了:

      child: Html(
                      useRichText: true,
                      data: _content,
                      defaultTextStyle: TextStyle(
                        fontSize: 18.0,
                        color: Colors.black,
                        decoration: TextDecoration.none,
                      ),
                    ),

    总结:加载带html标签的内容,我们需要知晓官方源码是通过解析标签根节点的方式去获取图片地址或者文本内容进行加载,其中的原理不是很复杂。

    参考:

    flutter_html插件:https://pub.flutter-io.cn/packages/flutter_html

    StatelessWidget&StatefulWidgethttps://flutterchina.club/widgets-intro/

    Image.net:https://api.flutter.dev/flutter/widgets/Image/Image.network.html

    资源下载:https://download.csdn.net/download/u013491829/12276485

    展开全文
  • import 'package:flutter_html/flutter_html.dart'; returnContainer( child: Html( data: "<div>HTML</div>", ), );
    import 'package:flutter_html/flutter_html.dart';
      returnContainer(
        child: Html(
          data: "<div>HTML</div>",
        ),
      );
    
    展开全文
  • Flutter与JS的双向调用、Flutter中Widget与Html混合加载
  • Flutter解析HTML链接

    千次阅读 2020-04-22 18:27:20
    Flutter解析HTML链接前言代码核心 前言 使用Flutter解析HTML获取标题、图片。之前Android使用的Jsoup。现在要搞Flutter,dart应该会有类似Jsoup的库。 代码 (本文以头条新闻url为例,公众号、简书、知乎大同小异) ...
  • flutter 显示HTML代码

    千次阅读 2019-05-17 15:10:00
    需求是后台返回的是富文本,所以需要吧富文本转成flutter 能识别的内容 找了几个插件只有这个比较好用写下来 ...import 'package:flutter_html/flutter_html.dart'; 引入 Html( data: """ <!...
  • flutter

    2019-03-21 13:29:00
    paddingwrapcontainercolumnrowtextexpandedflexFractionallySizedBox 转载于:https://www.cnblogs.com/pythonClub/p/10571084.html
  • flutter 解析HTML 方法 俩者不同之处 安卓使用报错 网页无法打开
  • Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. If you appreciate the content , support projects visibility,...
  • 仔细阅读我的文章,一定有收获。 仔细阅读我的文章,一定有收获。 仔细阅读我的文章,一定有收获。 仔细阅读我的文章,一定有收获。 仔细阅读我的文章,一定有收获。 仔细阅读我的文章,一定有收获。
  • 查询了一下有google官方提供的插件webview_flutter (点击查看) 看了一下github上的demo还是感觉一头雾水,只能硬着头皮去写 写完以后发现没办法显示图片,前端给的html中的图片是http的,怎么都加载不出来 于是就...
  • <p>https://master-docs-flutter-io.firebaseapp.com/flutter/material/Chip/onDeleted.html</p> <p>It would be great if from IntelliJ you could create a project with a sample with a single click while ...
  • Flutter框架

    千次阅读 2018-05-07 18:46:36
    Flutter框架出现之前,主要有以下几个移动App跨平台开发框架:Cordova、Ionic、AppCan、Dcloud、APICloud、React Native。虽然有那么多框架,但是它们的原理都是使用HTML、CSS和JavaScript进行移动App开发,多平台...
  • flutter boost的简单源码分析
  • Flutter webview加载本地HTML方案

    千次阅读 2020-03-28 20:54:53
    @override Widget build(BuildContext context) { return loading?CircularProgressIndicator():WebView( initialUrl: ‘’, javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController ...
  • 搭建Flutter开发环境的文档。...https://book.flutterchina.club/chapter1/install_flutter.html 入门: 在macOS上搭建Flutter开发环境 https://flutterchina.club/get-started/install/ ...

空空如也

1 2 3 4 5 ... 20
收藏数 634
精华内容 253
关键字:

flutter html