超过百万的StackOverflow Flutter 问题
老孟导读:今天分享StackOverflow上高访问量的20大问题,这些问题给我一种特别熟悉的感觉,我想你一定或多或少的遇到过,有的问题在stackoverflow上有几十万的阅读量,说明很多人都遇到了这些问题,把这些问题整理分享给大家,每期20个,每隔2周分享一次。
如何实现Android平台的wrap_content 和match_parent
你可以按照如下方式实现:
1、Width = Wrap_content Height=Wrap_content:
Wrap(
children: <Widget>[your_child])
2、Width = Match_parent Height=Match_parent:
Container(
height: double.infinity,
width: double.infinity,child:your_child)
3、Width = Match_parent ,Height = Wrap_conten:
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[*your_child*],
);
4、Width = Wrap_content ,Height = Match_parent:
Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[your_child],
);
如何避免FutureBuilder频繁执行future
方法
错误用法:
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: httpCall(),
builder: (context, snapshot) {
},
);
}
正确用法:
class _ExampleState extends State<Example> {
Future<int> future;
@override
void initState() {
future = Future.value(42);
super.initState();
}
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: future,
builder: (context, snapshot) {
},
);
}
}
底部导航切换导致重建问题
在使用底部导航时经常会使用如下写法:
Widget _currentBody;
@override
Widget build(BuildContext context) {
return Scaffold(
body: _currentBody,
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
...
],
onTap: (index) {
_bottomNavigationChange(index);
},
),
);
}
_bottomNavigationChange(int index) {
switch (index) {
case 0:
_currentBody = OnePage();
break;
case 1:
_currentBody = TwoPage();
break;
case 2:
_currentBody = ThreePage();
break;
}
setState(() {});
}
此用法导致每次切换时都会重建页面。
解决办法,使用IndexedStack
:
int _currIndex;
@override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: _currIndex,
children: <Widget>[OnePage(), TwoPage(), ThreePage()],
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
...
],
onTap: (index) {
_bottomNavigationChange(index);
},
),
);
}
_bottomNavigationChange(int index) {
setState(() {
_currIndex = index;
});
}
TabBar切换导致重建(build)问题
通常情况下,使用TabBarView如下:
TabBarView(
controller: this._tabController,
children: <Widget>[
_buildTabView1(),
_buildTabView2(),
],
)
此时切换tab时,页面会重建,解决方法设置PageStorageKey
:
var _newsKey = PageStorageKey('news');
var _technologyKey = PageStorageKey('technology');
TabBarView(
controller: this._tabController,
children: <Widget>[
_buildTabView1(_newsKey),
_buildTabView2(_technologyKey),
],
)
Stack 子组件设置了宽高不起作用
在Stack中设置100x100红色盒子,如下:
Center(
child: Container(
height: 300,
width: 300,
color: Colors.blue,
child: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
)
],
),
),
)
此时红色盒子充满父组件,解决办法,给红色盒子组件包裹Center、Align或者UnconstrainedBox,代码如下:
Positioned.fill(
child: Align(
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
),
)
如何在State类中获取StatefulWidget控件的属性
class Test extends StatefulWidget {
Test({this.data});
final int data;
@override
State<StatefulWidget> createState() => _TestState();
}
class _TestState extends State<Test>{
}
如下,如何在_TestState获取到Test的data
数据呢:
- 在_TestState也定义同样的参数,此方式比较麻烦,不推荐。
- 直接使用
widget.data
(推荐)。
default value of optional parameter must be constant
上面的异常在类构造函数的时候会经常遇见,如下面的代码就会出现此异常:
class BarrageItem extends StatefulWidget {
BarrageItem(
{ this.text,
this.duration = Duration(seconds: 3)});
异常信息提示:可选参数必须为常量,修改如下:
const Duration _kDuration = Duration(seconds: 3);
class BarrageItem extends StatefulWidget {
BarrageItem(
{this.text,
this.duration = _kDuration});
定义一个常量,Dart
中常量通常使用k
开头,_
表示私有,只能在当前包内使用,别问我为什么如此命名,问就是源代码中就是如此命名的。
如何移除debug模式下右上角“DEBUG”标识
MaterialApp(
debugShowCheckedModeBanner: false
)
如何使用16进制的颜色值
下面的用法是无法显示颜色的:
Color(0xb74093)
因为Color的构造函数是ARGB
,所以需要加上透明度,正确用法:
Color(0xFFb74093)
FF
表示完全不透明。
如何改变应用程序的icon和名称
链接:https://blog.csdn.net/mengks1987/article/details/95306508
如何给TextField设置初始值
class _FooState extends State<Foo> {
TextEditingController _controller;
@override
void initState() {
super.initState();
_controller = new TextEditingController(text: '初始值');
}
@override
Widget build(BuildContext context) {
return TextField(
controller: _controller,
);
}
}
Scaffold.of() called with a context that does not contain a Scaffold
Scaffold.of()中的context没有包含在Scaffold中,如下代码就会报此异常:
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('老孟'),
),
body: Center(
child: RaisedButton(
color: Colors.pink,
textColor: Colors.white,
onPressed: _displaySnackBar(context),
child: Text('show SnackBar'),
),
),
);
}
}
_displaySnackBar(BuildContext context) {
final snackBar = SnackBar(content: Text('老孟'));
Scaffold.of(context).showSnackBar(snackBar);
}
注意此时的context是HomePage的,HomePage并没有包含在Scaffold中,所以并不是调用在Scaffold中就可以,而是看context,修改如下:
_scaffoldKey.currentState.showSnackBar(snackbar);
或者:
Scaffold(
appBar: AppBar(
title: Text('老孟'),
),
body: Builder(
builder: (context) =>
Center(
child: RaisedButton(
color: Colors.pink,
textColor: Colors.white,
onPressed: () => _displaySnackBar(context),
child: Text('老孟'),
),
),
),
);
Waiting for another flutter command to release the startup lock
在执行flutter
命令时经常遇到上面的问题,
解决办法一:
1、Mac或者Linux在终端执行如下命令:
killall -9 dart
2、Window执行如下命令:
taskkill /F /IM dart.exe
解决办法二:
删除flutter SDK的目录下/bin/cache/lockfile
文件。
无法调用setState
不能在StatelessWidget控件中调用了,需要在StatefulWidget中调用。
设置当前控件大小为父控件大小的百分比
1、使用FractionallySizedBox
控件
2、获取父控件的大小并乘以百分比:
MediaQuery.of(context).size.width * 0.5
Row直接包裹TextField异常:BoxConstraints forces an infinite width
解决方法:
Row(
children: <Widget>[
Flexible(
child: new TextField(),
),
],
),
TextField 动态获取焦点和失去焦点
获取焦点:
FocusScope.of(context).requestFocus(_focusNode);
_focusNode
为TextField的focusNode:
_focusNode = FocusNode();
TextField(
focusNode: _focusNode,
...
)
失去焦点:
_focusNode.unfocus();
如何判断当前平台
import 'dart:io' show Platform;
if (Platform.isAndroid) {
// Android-specific code
} else if (Platform.isIOS) {
// iOS-specific code
}
平台类型包括:
Platform.isAndroid
Platform.isFuchsia
Platform.isIOS
Platform.isLinux
Platform.isMacOS
Platform.isWindows
Android无法访问http
其实这本身不是Flutter的问题,但在开发中经常遇到,在Android Pie版本及以上和IOS 系统上默认禁止访问http,主要是为了安全考虑。
Android解决办法:
在./android/app/src/main/AndroidManifest.xml
配置文件中application标签里面设置networkSecurityConfig属性:
<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
<application android:networkSecurityConfig="@xml/network_security_config">
<!-- ... -->
</application>
</manifest>
在./android/app/src/main/res
目录下创建xml文件夹(已存在不用创建),在xml文件夹下创建network_security_config.xml文件,内容如下:
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
</trust-anchors>
</base-config>
</network-security-config>
IOS无法访问http
在./ios/Runner/Info.plist
文件中添加如下:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
...
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
</dict>
</plist>
交流
Github地址:https://github.com/781238222/flutter-do
170+组件详细用法:http://laomengit.com
如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
Flutter生态建设离不开你我他,需要大家共同的努力,点赞也是其中的一种,如果文章帮助到了你,希望点个赞。
超过百万的StackOverflow Flutter 问题的更多相关文章
- 超过百万的StackOverflow Flutter 问题-第二期
老孟导读:一个月前分享的<超过百万的StackOverflow Flutter 问题-第一期>受到很多朋友的喜欢,非常感谢大家的支持,在文章末尾有第一期的链接,希望此文能对你有所帮助. N ...
- KAFKA:如何做到1秒发布百万级条消息
http://rdcqii.hundsun.com/portal/article/709.html KAFKA是分布式发布-订阅消息系统,是一个分布式的,可划分的,冗余备份的持久性的日志服务.它主要用 ...
- [转帖]“腾百万”之后,腾讯的云操作系统VStation单集群调度达10万台
“腾百万”之后,腾讯的云操作系统VStation单集群调度达10万台 https://www.leiphone.com/news/201909/4BsKCJtvvUCEb66c.html 腾讯有超过1 ...
- 【老孟Flutter】Flutter 2.0 重磅更新
老孟导读:昨天期待已久的 Flutter 2.0 终于发布了,Web 端终于提正了,春季期间我发布的一篇文章,其中的一个预测就是 Web 正式发布,已经实现了,还有一个预测是:2021年将是 Flut ...
- 无限可能 | Flutter 2 重点更新一览
我们非常高兴在本周发布了 Flutter 2.自 Flutter 1.0 发布至今已有两年多的时间,在如此短暂的时间内,我们解决了 24,541 个 issue,合并了来自 765 个贡献者的 17, ...
- 【老孟Flutter】Flutter 2的新功能
老孟导读:昨天期待已久的 Flutter 2.0 终于发布了, Flutter Web和Null安全性趋于稳定,Flutter桌面安全性逐渐转向Beta版! 原文链接:https://medium.c ...
- Flutter 2.8 更新详解
北半球的冬意已至,黄叶与气温均随风而落.年终的最后一个 Flutter 稳定版本 已悄然来到你的面前.让我们向 Flutter 2.8 打声招呼- 本次更新包含了 207 位贡献者和 178 位审核者 ...
- mysql 数据表备份导出,恢复导入操作实践
因为经常跑脚本的关系, 每次跑完数据之后,相关的测试服数据库表的数据都被跑乱了,重新跑脚本恢复回来速度也不快,所以尝试在跑脚本之前直接备份该表,然后跑完数据之后恢复的方式,应该会方便一点.所以实践一波 ...
- Storm介绍(一)
作者:Jack47 PS:如果喜欢我写的文章,欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 内容简介 本文是Storm系列之一,介绍了Storm的起源,Storm ...
随机推荐
- mysql锁机制和事务隔离
mysql事务 1.InnoDB事务原理 事务(Transaction)是数据库区别于文件系统的重要特性之一,事务会把数据库从一种一致性状态转换为另一种一致性状态. 在数据库提交时,可以确保要么所有修 ...
- Mybatis(三)Mybatis映射开发
4.1 一对一 4.1.1 表对应关系, 一个订单对应一个用户 4.1.2 实体对应关系 public class Order { private int id; private Date order ...
- Mol Cell Proteomics. | MARMoSET – Extracting Publication-ready Mass Spectrometry Metadata from RAW Files
本文是马克思普朗克心肺研究所的三名研究者Marina Kiweler.Mario Looso和Johannes Graumann发表在8月刊的MCP的一篇文章. 由于Omics实验经常涉及数百个数据文 ...
- 如何简单的将手机投屏在windows上(可在电脑上直接操作手机)
首先附上要使用的scrcpy源地址 接下来是如何使用(我用的是安卓手机+win10): 下载好后,首先使用数据线连接手机到电脑,并且手机需要打开开发人员选项(不知道如何打开的自行百度): 打开到安装s ...
- CSS劫持攻击
CSS劫持攻击 CSS劫持是一种并不很受重视的劫持方式,但是其也有一定的危害,且由于其并不一定需要依赖JavaScript,这使得此种攻击方式更容易实现. ClickJacking点击劫持 当访问某网 ...
- Shiro RememberMe 1.2.4 反序列化命令执行漏洞复现
影响版本 Apache Shiro <= 1.2.4 产生原因 shiro默认使用了CookieRememberMeManager,其处理cookie的流程是:得到rememberMe的cook ...
- VS中执行汇编代码
unsigned char shellcode[] = "\xfc\xe8\x82\x00\x00\x00\x60\x89\xe5\x31\xc0\x64\x8b\x50" &qu ...
- zabbix笔记_002
监控登录用户 监控图形配置 创建图形: 配置完成后查看图形: 创建触发器配置 创建完成后可以查看 监控磁盘IO I/O查看工具: istat 安装[需要epel源]: yum install -y s ...
- C语言实现strcat / strlen / strcmp / strcpy
主要考虑两点: 返回值对使用的便利性. 边界,null的判断. strcat char *m_strcat(char *des, const char *src) { assert((des != N ...
- tcp/ip面试题
TCP协议 1.OSI与TCP/IP各层的结构和功能,协议和作用. OSI七层模型对应TCP/IP四层模型,只是分法不同而已. 应用层:提供应用层服务,文件传输(FTP),电子邮件( ...