Flutter Candies 一桶天下，腾讯T3大牛亲自讲解

最新推荐文章于 2024-08-21 09:31:09 发布

2024云技术

最新推荐文章于 2024-08-21 09:31:09 发布

阅读量1k

点赞数 25

分类专栏： 2024年程序员学习文章标签： flutter java 开发语言

本文链接：https://blog.csdn.net/2401_83621004/article/details/137128671

版权

2024年程序员学习专栏收录该内容

291 篇文章 2 订阅

订阅专栏

文章详细介绍了Flutter中的ExtendedImage、ExtendedText、ExtendedTextField等库的功能和使用常见问题，以及下拉刷新、瀑布流、列表加载更多等组件的使用技巧，同时还提到了Android开发的最佳实践和面试准备资源。

摘要由CSDN通过智能技术生成

使用常见问题

组件名字跟官方相同，所以当你们使用的时候，记住屏蔽掉官方的(太大胆了)

import ‘package:flutter/widgets.dart’ hide NestedScrollView;

对NestedScrollView不熟悉这个建议先百度下，熟悉了官方的使用方式之后，再来看这些官方未解决的问题。

extended_image

Flutter上面最能打的图片库(这样说没人打我吧) 掘金文章地址

主要功能

缓存网络图片
加载状态(正在加载，完成，失败)
拖拽缩放图片
图片编辑(裁剪，旋转，翻转)
图片预览(跟微信掘金一样)
滑动退出效果(跟微信掘金一样)
设置圆角，边框

使用常见问题

加载状态如何重写

设计原则是，如果你需要重写一个状态，就返回你想要的效果，否则请返回null。下面是一个重写“正在加载”的例子

ExtendedImage.network(

item.imageUrl,

loadStateChanged: (ExtendedImageState state) {

if (state.extendedImageLoadState == LoadState.loading) {

return Container();

}

return null;

);

很多人因为在重写了completed状态而丢失了手势和裁剪功能，为此我新增了ExtendedImageState.completedWidget。下面是重写completed状态而不丢失裁剪手势功能的例子。

ExtendedImage.network(

item.imageUrl,

loadStateChanged: (ExtendedImageState state) {

if (state.extendedImageLoadState == LoadState.completed) {

return Padding(

padding: EdgeInsets.all(10.0),

child: state.completedWidget,

);

}

return null;

);

path_provider插件混合开发问题

请自行查看issue

extended_image_library

extended_image的基础库，如果你只需要网络图片缓存功能，你可以只引用这个库

Image(

image: ExtendedNetworkImageProvider(“”, cache: true),

);

extended_text

富有中国特色强大功能的富文本掘金文章地址

主要功能

快速构建富文本
支持选择(包括WidgetSpan)以及自定义菜单
支持溢出文字自定义
支持自定义背景

使用常见问题

SpecialTextSpanBuilder的使用

为了快速构建富文本，比如把 ‘[love]’ 这种文字变成表情图片，提供了SpecialTextSpanBuilder。其原理很简单，就是根据你自己的规则，将文字转换成各种InlineSapn(TextSpan,ImageSpan,WidgetSpan).

这里build方法是用入栈的方式遍历文字，createSpecialText方法是用来根据你自己的规则创建SpecialText的。有一些用户可能觉得太复杂了，但是我这样考虑就是为了大家能根据自己业务的需求来自定义自己的规则。耐心看懂demo，你可以快速的自定义自己的富文本

abstract class SpecialTextSpanBuilder

{

TextSpan build(String data,

{TextStyle textStyle, SpecialTextGestureTapCallback onTap})

SpecialText createSpecialText(String flag,

{TextStyle textStyle, SpecialTextGestureTapCallback onTap, int index});

}

extended_text_field

Flutters上面唯一能支持输入内容是WidgetSpan的输入框掘金文章地址

主要功能

快速构建富文本
支持选择(包括WidgetSpan)以及自定义菜单

仿掘金推特点赞按钮

仿掘金推特点赞按钮，带数量滚动动画掘金文章地址

下拉刷新

可以在任何滚动场景中使用(包括NestedScrollView)的自定义下拉刷新组件，只提供了下拉刷新的状态，你可以最大化的自定义自己的效果而不用拘泥于组件本身提供。你可以根据状态距离，构建出任何你想要的效果。demo里面的4种效果只是例子，欢迎大家pr更多更有趣的效果。掘金文章地址

使用常见问题

不满一屏幕，无法下拉刷新
iOS Bouncing 效果影响下拉刷新

这2个问题都可以通过设置列表的physics来解决,我这里提供了AlwaysScrollableClampingScrollPhysics。

///in case list is not full screen and remove ios Bouncing

class AlwaysScrollableClampingScrollPhysics extends ClampingScrollPhysics {

const AlwaysScrollableClampingScrollPhysics({ScrollPhysics parent})

super(parent: parent);

@override

AlwaysScrollableClampingScrollPhysics applyTo(ScrollPhysics ancestor) {

return AlwaysScrollableClampingScrollPhysics(parent: buildParent(ancestor));

}

@override

bool shouldAcceptUserOffset(ScrollMetrics position) {

return true;

}

扩展列表

支持特殊布局，内存清除以及可视区域Indexes变化追踪。更多详情

回收图片缓存

collectGarbage: (List indexes) {

///collectGarbage

indexes.forEach((index) {

final item = listSourceRepository[index];

if (item.hasImage) {

item.images.forEach((image) {

final provider = ExtendedNetworkImageProvider(

image.imageUrl,

);

provider.evict();

});

}

});

| |

| — |

瀑布流

高性能的瀑布流布局，喜欢的瀑布流的小伙伴赶快收藏起来。

| |

| — |

列表加载更多

继承了UWP的加载更多思想的作品，将UI跟数据源的契约完美打通，你只要写过一次，你就会爱上这种方式，新增支持瀑布流。掘金文章地址

extended_tabs

支持TabBarView的联动，就是说二级TabBarView不能滑动了，就看一级能不能滑动，能滑动就滑动一级的掘金文章地址

路由注解

轻巧灵活的路由注解工具，一行命令完成路由映射. 掘金文章地址

Json转换Dart实体类工具

使用C#以及Flutter构建的json转换dart实体类工具，提供超级多的平台选择，大气的ui界面(偷笑.gif) 掘金文章地址

| 平台 | 语言 | 描述 | 代码/安装包地址 |

| — | — | — | — |

| web | C# | silverlight构建, 需要安装silverlight插件，有浏览器限制 | 网页地址和带字体文件网页地址 |

Flutter常见问题

从哪里上手Flutter

Flutter中国官方网站，Flutter官方明媒正娶，从入门到深入，各种资源应有尽有。如果你准备入手Flutter，这应该是你必看的网站。

萌新问问题

每个人都从萌新而来，如果你想开森的写代码，自己解决问题是必须的

英语是很重要的。
Google和SO能解决你大部分的问题
问问题的时候，尽量上代码，或者说明你的意图，因为可能你的想法或者解决方向就是错误的

如果实在无法自己解决，可以求助于大佬，但是请注意提问方式，毕竟好沟通能节约双方的时间，大佬也要工作也要吃饭。

怎么找插件

把你的想要效果的插件的名字或者其他平台的组件叫什么名字，转为为英文，到pub 上面搜索，分高的使用的人多，相对就比较稳定更好。

安卓下载各种东西慢

我们经常运行别人组件的时候，发现各种下载失败，各种下载缓慢请使用国内镜像，飞一般的赶脚。

替换google()和jcenter()

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' }

替换grade下载地址将上面的替换成下面镜像

#distributionUrl=https://services.gradle.org/distributions/gradle-5.1.1-all.zip

#csdn镜像

distributionUrl=https://downloads.gradle-dn.com/distributions/gradle-5.1.1-all.zip

为啥设置Size没有效果

在开发中，我们发现给组件设置了大小，但是却没有效果。举个栗子，在Appbar的leading/actions中，我们想直接设置宽高是不可能的。我们需要使用UnconstrainedBox来移除父widget对子大小的限制，如下代码

AppBar(

title: Text(widget.title),

leading: UnconstrainedBox(

child: Container(

width: 50.0,

height: 10.0,

color: Colors.red,

键盘弹出的时候，怎么把布局顶上去，而不遮住布局

通过下面代码获取键盘高度(放心键盘弹出或者收起的时候都会触发build)

double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;

然后你的布局大概就是下面这样

Column(

children: [

///你的布局

Expanded(

child: Container(),

///顶起你的布局

Container(

height: keyboardHeight,

)

);

其实这个我也是在源码里面scaffold.dart中看到的，抄作业很重要

关键代码

并且在_ScaffoldLayout中增加了这个高度

pub.dev 慢，打不开?!

中国镜像你在等什么呢，学起来

国际化之后设置hintText，光标位置不一致

issue地址通过设置下面代码解决，全局设置文字主题

textTheme: theme.textTheme.copyWith(

subhead: theme.textTheme.subhead

.copyWith(textBaseline: TextBaseline.alphabetic)),

我的文本设置了溢出，为啥没有效果

我们经常听到的就是为什么我的文本设置了溢出显示，但是它却显示黄色溢出警告了？对于文本Text来说，如果它的父Widget没有给它做大小限制，它默认是无限长的我们解决的方法如下。

给它设置个大小，如果无效请参考为啥设置Size没有效果（特别注意，Row/Column嵌套的时候。你需要从最外面一层就给内层限定大小，参考下面一条）
Row/Column中，给它设置Expaned/Flexible 这样告诉文本，你的大小是，其他widget剩下的那空间。 Expaned/Flexible都有这个作用，但是它们的区别是什么呢。给你们看2张图你就明白了。

return Row(

children: [

Flexible(

child: Text(

“我是一个很短的文本”,

overflow: TextOverflow.ellipsis,

style: TextStyle(fontSize: 12),

Container(

color: Colors.red,

width: 100.0,

)

);

return Row(

children: [

Expanded(

child: Text(

“我是一个很短的文本”,

overflow: TextOverflow.ellipsis,

style: TextStyle(fontSize: 12),

Container(

color: Colors.red,

width: 100.0,

)

);

Expaned/Flexible 两者的区别就在于，Expanded会强制占100剩余的空间，而Flexible可以自适应。当然他们最大也都是占100剩余的空间。

获取滚动组件中孩子的位置

demo

更多的细节，你可以查看文章

官方的Appbar不好用

由于官方的Appbar增加了对material风格的设置，所以很多地方都有一些限制。其实也不能怪官方，这是一种设计规范。但是我们就是想自己骚怎么办呢？？我之前写了个 my_app_bar.dart，之前一直放gists上面，不方便大家查看，现在也移入了🍬。这是一个简单的实现，看明白了代码原理之后，你可以扩展出更多适合自己的appbar。