flutter博客,flutter 博客-成都快上网建站

flutter博客,flutter 博客

Flutter-Text文本组件

在开发中,文本是我们最常接触的控件。这篇博客来分享一下 Flutter 中的 Text 文本组件,我们展示的文本都可以用这个组件来展示,希望看文章的小伙伴有所帮助。

创新互联专注于企业网络营销推广、网站重做改版、兴安网站定制设计、自适应品牌网站建设、H5响应式网站商城网站制作、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为兴安等各大城市提供网站开发制作服务。

这样我们就可以在界面当中显示一个文本,显示是 Hello Flutter 。下面我们来说说 Text 组件的属性:

设置文本颜色:

设置文本大小:

设置文本样式-加粗:

设置文本样式-斜体:

设置文本位置:

TextAlign可选属性: center 、 end 、 start 、 justify 、 left 、 right 。

设置文本高度:

设置文本最大行数:

设置文本有下划线:

设置文本有虚线类型下划线:

设置文字间隔:

文本超过最大行数设置 ... :

Flutter - 初次使用FFI的一些记录

最近在研究flutter如何绕过原生端直接调用c++的函数库,在flutter2版本官方提供了比较稳定的FFI(外部功能接口),下面是最基本的用法:

1.创建一个用于flutter调用的c++文件,文件名为cout.c++,文件里面有一个count方法

2.将写好的c++文件放在IOS/Classes文件夹下(至于为什么要放在这里,网上很多博客都是固定放在这个位置,至于能不能放在其他位置,以后再研究)。

3.在android目录下创建CMakeLists.txt文件,把所有需要调用的c++文件通过add_library导入,这里导入刚才写好的cout.c++。

4.在android/app目录下的build.gradle文件里配置CMakelists。

5.经过上面4步所需要调用的c++库已经导入进我们的flutter项目了,接下来就是在flutter端调用c++库里面的函数。

输出结果:

在 Flutter 添加页面过渡动画

[图片上传失败...(image-c939db-1650550552942)]

大家好,在这篇文章中,我们将学习如何添加动画,同时从一个页面到其他在 Flutter。我们将覆盖不同类型的动画和实现基本动画 Flutter 使用包页动画过渡。

page_animation_transition

[图片上传失败...(image-1c5f15-1650550552942)]

动画在提升用户体验方面起着至关重要的作用,但动画到底是什么呢?

设计语言,例如 Material,定义了在路线(或屏幕)之间转换时的标准行为。不过,有时候,自定义屏幕之间的转换可以使应用程序更加独特。

在本教程中,我们将使用包页面 page_animation_transition 来简化在页面上添加转换。

使用插件探索不同的转换

page_animation_transition

[图片上传失败...(image-6b6c30-1650550552943)]

假设您正在从 PageOne 过渡到 PageTwo

以下是图书馆支持的动画类型:

对于预定义的路由:

Navigator.pushNamed(context, '/pageTwo');

Pushnamed (context,’/pageTwo’) ;

Output:

输出:

[图片上传失败...(image-aaf4a9-1650550552943)]

输出:

[图片上传失败...(image-8bd8a1-1650550552943)]

希望这个博客能帮助你深入了解 Flutter 的转变。谢谢阅读!如果有任何错误,请在评论中让我知道,这样我可以改进。如果这个博客对你有帮助,就鼓掌吧!

© 猫哥

flutter项目升级2.0过程填坑记录

在此之前先推荐看大佬的: 填坑指导

iOS需要注意:

1、flutter2.0要求cocoapods 升级到1.9.0

详情看这篇博客

2、原来flutter项目中的podfile文件是旧版本的ccocoapods了,删除podfile和对应的.lock,然后flutter项目重新运行使用它自动生成的podfile文件

3、安装CocoaPods

卸载cocoapods:sudo gem uninstall cocoapods

查看cocoapods版本:pod --version

指定版本安装:

sudo gem install -n /usr/local/bin cocoapods -v 1.9.3(新MacOS系统升级)

不指定版本安装

sudo gem install -n /usr/local/bin cocoapods

说明 :老项目sdk1.17.0===升级到2.0.1,当前所有操作基于win平台

到此为止环境已经准备妥当,正式进入项目修改。

所有的插件都要适配到空安全,插件是否支持均会有对应说明Null safety,适配过程不确定版本的话,可以使用dio: any,适配完事后再在pubspec.lock文件中查看具体的版本修改过来,实在有部分插件没有支持的,参考下面

部分插件在适配空安全的版本放弃维护了,得自行更新或寻找替代,如: flutter_swiper 变为 flutter_swiper_null_safety ,插件更新后要注意项目中的用法是否需要更新

2.1.1: 以前采用的是 provide 插件共享全局数据,现在变化为 provider ,用法改变, 点击参考 ,以防文章丢失,我重复一遍:

比如:

2.1.2: dio版本升级到4.0.0最新版后,部分用法改变

2.2.1

2.2.2

解决方案:

2.2.3

解决方案:

2.2.4

解决方案:

2.2.5

解决方案:

2.2.6

解决方案:

2.2.7

解决方案:

2.2.8

解决方案: child 换为sliver

2.2.8.1

解决方案: 项目目录下: android--app-build.gradle --minSdkVersion改为:18 或者19

2.2.8.2

解决方案: 在pubspec.yarm管理里面添加:publish_to

2.2.8.3

解决方案: video_player升级后字段发生了变化,initialized字段更换为:isInitialized(_controller.value.isInitialized)

2.2.8.4

解决方案:

2.2.8.5

解决方案:

2.2.8.6

解决方案: 方案一:删除ios目录下的Podfile.lock 文件然后重新运行 pod install命令

方案二:删除ios目录下的Podfile.lock与Podfile文件 重新运行flutter run或flutter build ios

方案三:删除ios目录,重新运行 flutter create . 命令,注意有"."这个符号不要忘记

2.2.8.7

这个报错一般对应的就是下面的报错,注意看后面的报错信息,看是哪个插件报错。

解决方案: 把Podfile的版本注释打开,改为platform :ios, '9.0' 或者是更高的版本

全局替换

1.将new List() 替换为[];

2.TextField的inputFormatters:[WhitelistingTextInputFormatter.digitsOnly] 替换为[FilteringTextInputFormatter.digitsOnly]

3.TextField的inputFormatters:[WhitelistingTextInputFormatter(RegExp("[a-z|A-Z|0-9]"))]替换为FilteringTextInputFormatter.allow(RegExp("[a-z|A-Z|0-9]"))

4.Stack组件中overflow: Overflow.visible改为 clipBehavior: Clip.none;overflow: Overflow.clip改为clipBehavior:Clip.hardEdge

5.ListWheelScrollView组件中clipToSize = false改为clipBehavior: Clip.none,clipToSize = true改为 Clip.hardEdge

6.TextField中maxLengthEnforced: true改为maxLengthEnforcement:MaxLengthEnforcement.enforced

7.FlatButton、RaisedButton、OutlineButton的变化: 官方参考

颜色的属性发生了变化,由原来的Color 变为了MaterialStatePropertyColor, 这是未了解决不同状态(pressed、hovered、focused、disabled)下按钮颜色的变化

例如

8.出现如下警告

9.showSnackBar报错误

解决方案: Scaffold换为ScaffoldMessenger

10.textSelectionColor弃用

解决方案:

11.charts_flutter升级后属性报错

解决方案:

12.flutter 真机调试无法访问网络,dio报错

解决方案:

android:

ios:

问题12完整参考


网站名称:flutter博客,flutter 博客
文章链接:http://kswjz.com/article/dsdocee.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流