整理Flutter App开发过程中遇到的问题及解决方法

最近使用flutter开发一款app，因为是第一次接触flutter，在开发过程中遇到一些问题或常用的功能点，在此记录一下（持续更新…）

（1）禁止横屏

在开发过程中，如果手机设置了自动旋转，手机横屏会使你当前开发的app也横向展示。有时候app横向展示的时候页面会出现布局错乱。此时我们可以禁止横屏展示。代码截图如下：

在main.dart中添加如下代码：

    // An highlighted block//import   services.dartimport 'package:flutter/services.dart';SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, //只能纵向DeviceOrientation.portraitDown, //只能纵向]);

（2）粘贴复制中文化

flutter 中复制粘贴显示出来默认的是英文（paste）,修改为中文需要引入flutter_localizations，代码截图如下：

在main.dart中添加如下代码

    // An highlighted block//import   flutter_localizations.dartimport 'package:flutter_localizations/flutter_localizations.dart';localizationsDelegates: [GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,GlobalCupertinoLocalizations.delegate,],supportedLocales: [const Locale('zh', 'CN'),const Locale('en', 'US'),],

（3）修改状态栏的颜色

flutter app修改状态栏的颜色分为带有appbar和不带appbar2种情况。

不带appbar的情况代码如下

    // An highlighted blockreturn AnnotatedRegion <SystemUiOverlayStyle>(child: Scaffold(backgroundColor: Colors.white,body:Container()),value: SystemUiOverlayStyle(//值可以根据需要修改statusBarColor: Colors.transparent),)

带有appbar的情况，需在appBar中添加 brightness: Brightness.light（值可以根据需要修改）,代码如下：

  // An highlighted blockreturn AnnotatedRegion <SystemUiOverlayStyle>(child: Scaffold(backgroundColor: Colors.white,appBar: AppBar(backgroundColor: Colors.white,brightness: Brightness.light,elevation: 0,  //去掉阴影centerTitle: true,),body:Container()),value: SystemUiOverlayStyle(//值可以根据需要修改statusBarColor: Colors.transparent),)

（4）下拉刷新

下拉刷新的情况我们可以使用RefreshIndicator来实现，实现代码如下：

     // An highlighted blockreturn Scaffold(backgroundColor: Colors.black,body:RefreshIndicator(//圆圈进度颜色color: Colors.blue,//下拉停止的距离displacement: 44.0,//背景颜色backgroundColor: Colors.grey[200],onRefresh: () async{//模拟网络请求await Future.delayed(Duration(milliseconds: 2000), () {//TODO：具体的实现方法});//结束刷新return Future.value(true);}));

（5）setState更新数据，子控件数据不更新

关于这个问题，我们拿上面的问题来举例，我的父组件中是遍历pageview的（仿抖音刷视频），当我下拉刷新时，我将数据倒序排列，发现，数据改变了，但是第一个页面的视频没有刷新，这时我们需要在子组件中添加didUpdateWidget来刷新当前页面，代码如下：

在父组件中，我们在onRefresh方法中更新了_videoList 数组。我们的子组件是VideoPlayerMaskWidget

     // An highlighted blockreturn Scaffold(backgroundColor: Colors.black,body: RefreshIndicator(//圆圈进度颜色color: Colors.blue,//下拉停止的距离displacement: 44.0,//背景颜色backgroundColor: Colors.grey[200],onRefresh: () async {//模拟网络请求await Future.delayed(Duration(milliseconds: 2000), () {//TODO：具体的实现方法//_videoList[0]['player'].pause();List _list = [];_list.addAll(_videoList.reversed);if (_list.isNotEmpty) {//我们更新了_videoListsetState(() {_videoList = _list;});}});//结束刷新return Future.value(true);},child: _videoList.isNotEmpty? PageView.builder(scrollDirection: Axis.vertical,controller: _pageController,itemBuilder: (context, index) {Widget _player = Container(child: FijkView(width: ScreenAdapter.setWidth(750),height: ScreenAdapter.setHeight(1200),player: _videoList[index]['player'],fit: FijkFit(sizeFactor: -0.1,aspectRatio: 0.55,alignment: Alignment.center,),color: Colors.black,),);return VideoPlayerMaskWidget(player: _player, //播放器videoModel: _videoList[index],);},itemCount: _videoList.length,onPageChanged: (index) {//TODO:pageview  翻页},): Container(),),);

此时在我们的子组件中视频的地址虽然更新了，但是界面播放的还是原来的视频，这时，在我们的子组件（VideoPlayerMaskWidget）中需要添加didUpdateWidget来进行刷新子组件的值。代码如下：

     // An highlighted block@overridedidUpdateWidget(VideoPlayerMaskWidget oldWidget){//给 _videoModel 重新赋值_videoModel = widget.videoModel;}

（6）瀑布流布局的实现

现在很多的app都趋向于瀑布流式的布局，下面我们介绍利用flutter_staggered_grid_view组件来实现瀑布流布局。组件详细的api可以在https://pub.flutter-io.cn/packages/flutter_staggered_grid_view中查看。

首先在pubspec.yaml文件中引入组件

  // An highlighted blockflutter_staggered_grid_view: ^0.6.1

在需要使用的页面import 组件，代码如下：

  // An highlighted blockimport 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
@override
Widget build(BuildContext context) {var cardWidth = (screenwidth - ScreenAdapter.setWidth(30)) / 2;return StaggeredGrid.count(crossAxisCount: 2,  //总共多少列mainAxisSpacing: 10,//主轴间距crossAxisSpacing: 10,//纵轴间距//_list是你需要展示的数据children: _list.map((item) {return InkWell(onTap: () {//TODO:点击事件},child: Container(),);}).toList(),);
}
}

整理Flutter App开发过程中遇到的问题及解决方法相关推荐

jedis开发过程中遇到的问题及其解决方法
1.问题: The constructor ShardedJedisPool(GenericObjectPool$Config, List<JedisShardInfo>) refers ...
项目开发过程中遇到的问题和解决方法
在开发程序的过程中遇到了不少问题,在这里记录一下. Q:Modbus的收发.flash的读写都OK了,用上位机调试,发现写入的数据一直都是一个常数. A:用逻辑分析仪读上位机发的报文,发现上位机发的M ...
java开发中遇到的问题_Java开发过程中遇到的问题及解决方法
1.SpringMVC前台提交参数绑定list时大小超过256 解决方案:①在使用该方法的类上添加方法修改默认长度 @InitBindepublic voidinitBinder(WebDataBin ...
开发过程中的小问题和小方法
开发过程中的小问题和小方法 1.亲手敲代码,反复敲代码. 亲手敲是必须的,躺着刷到抖音里篮球教学,眼镜说你学会了,第二天手会告诉你,你并没有学会.至于反复,学习就是一个重复的过程,学到的知识反复输出, ...
【转】QT中使用MYSQL中文乱码解决方法
[转]QT中使用MYSQL中文乱码解决方法 Linux下乱码解决办法: 1.在QT程序的main.cpp的main函数中添加红色字那三句: int main(int argc, char *argv[ ...
记flume部署过程中遇到的问题以及解决方法（持续更新）
项目需求是将线上服务器生成的日志信息实时导入kafka,采用agent和collector分层传输,app的数据通过thrift传给agent,agent通过avro sink将数据发给collect ...
iphone6s计算机驱动,教你iphone6s连接电脑出现驱动问题怎么办及iOS9.0.2 App Store打不开问题的解决方法...
有的用户的iphone6s连接电脑时,提示驱动安装失败或需要安装手机驱动,下面就教大家用驱动人生解决iphone6s驱动问题,一起来看看吧! 首先,下载安装一个专业的驱动软件,比如驱动人生6,安装好软 ...
centos在yum install报错：Another app is currently holding the yum lock解决方法
centos在yum install报错:Another app is currently holding the yum lock解决方法参考文章: (1)centos在yum install报错 ...
在Ubuntu17.04中遇到无法清空回收站解决方法
在Ubuntu17.04中遇到无法清空回收站解决方法参考文章: (1)在Ubuntu17.04中遇到无法清空回收站解决方法 (2)https://www.cnblogs.com/Chan94/p/9 ...

整理Flutter App开发过程中遇到的问题及解决方法

整理Flutter App开发过程中遇到的问题及解决方法

（1）禁止横屏

（2）粘贴复制中文化

（3）修改状态栏的颜色

（4）下拉刷新

（5）setState更新数据，子控件数据不更新

在父组件中，我们在onRefresh方法中更新了_videoList 数组。我们的子组件是VideoPlayerMaskWidget

此时在我们的子组件中视频的地址虽然更新了，但是界面播放的还是原来的视频，这时，在我们的子组件（VideoPlayerMaskWidget）中需要添加didUpdateWidget来进行刷新子组件的值。代码如下：

（6）瀑布流布局的实现

整理Flutter App开发过程中遇到的问题及解决方法相关推荐

最新文章

热门文章