Flutter|Flutter使用小技巧三（持续更新） android|ios|flutter

Flutter使用小技巧一（持续更新）

Flutter使用小技巧三（持续更新...）

Row 直接包裹 TextField 异常：BoxConstraints forces an infinite width
Expanded、Flexible区别
Android无法访问http
IOS无法访问http
获取当前系统Locale
ClipRRect 圆角无效
箭头函数不要写多行,否则报错
StatefulWidget 构造传参数
No MediaQuery ancestor could be found?

Row 直接包裹 TextField 异常：BoxConstraints forces an infinite width

//使用Flexible包裹 Row( children: [ Flexible( child: new TextField(), ), ], ),

Expanded、Flexible区别 Flexible是一个控制Row、Column、Flex等子组件如何布局的组件。
Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力(例如，Row在水平方向，Column在垂直方向)，但是它与Expanded组件不同，它不强制子组件填充可用空间
Row、Column、Flex会被Expanded撑开，充满主轴可用空间。

Expanded

文章图片

代码

body: new Row( children: [ new RaisedButton( onPressed: () { print('点击红色按钮事件'); }, color: const Color(0xffcc0000), child: new Text('红色按钮'), ), new Expanded( flex: 1, child: new RaisedButton( onPressed: () { print('点击黄色按钮事件'); }, color: const Color(0xfff1c232), child: new Text('黄色按钮'), ), ), new RaisedButton( onPressed: () { print('点击粉色按钮事件'); }, color: const Color(0xffea9999), child: new Text('粉色按钮'), ), ] ),

Flexible

文章图片

代码

body: new Row( children: [ new RaisedButton( onPressed: () { print('点击红色按钮事件'); }, color: const Color(0xffcc0000), child: new Text('红色按钮'), ), new Flexible( flex: 1, child: new RaisedButton( onPressed: () { print('点击黄色按钮事件'); }, color: const Color(0xfff1c232), child: new Text('黄色按钮'), ), ), new RaisedButton( onPressed: () { print('点击粉色按钮事件'); }, color: const Color(0xffea9999), child: new Text('粉色按钮'), ), ] ),

Android无法访问http android11以及以后为了安全Android系统禁用了http的网络请求
需进行如下配置

创建network_security_config.xml. (res/xml)
配置 ...

IOS无法访问http 在./ios/Runner/Info.plist文件中添加如下

... NSAppTransportSecurity NSAllowsArbitraryLoads

获取当前系统Locale

import 'dart:ui'; window.locale

ClipRRect 圆角无效问题代码：

_item(index) { return ClipRRect( borderRadius: BorderRadius.circular(8.0), child: Container( margin: const EdgeInsets.all(8.0), color: Colors.primaries[Random().nextInt(Colors.primaries.length)], height: 120, child: Center( child: Text( index.toString(), textAlign: TextAlign.center, style: const TextStyle(fontSize: 18), ), ), ), );

分析：由于ClipRRect内部被Container设置了margin导致的，我们将margin去除就会看到圆角，如果非要加个margin则需要外层再包裹个Container，并且color只能有最外层提供。

_item(index) { return Container( margin: const EdgeInsets.all(8.0), child: ClipRRect( borderRadius: BorderRadius.circular(8.0), child: Container( color: Colors.primaries[Random().nextInt(Colors.primaries.length)], height: 120, child: Center( child: Text( index.toString(), textAlign: TextAlign.center, style: const TextStyle(fontSize: 18), ), ), ), ), ); }

箭头函数不要写多行,否则报错 StatefulWidget 构造传参数

class UserTextField extends StatefulWidget { final TextEditingController? controller; final Widget? icon; final String? hintText; final bool obscureText; const UserTextField( {Key? key, this.controller, this.icon, this.hintText, this.obscureText = false}) : super(key: key); @override //如果State构造加入参数会提示警告信息：Don't put any logic in createState _UserTextFieldState createState() => _UserTextFieldState(); }

解决办法：_UserTextFieldState无需在构造中添加参数

只需要使用widget.xx调用即可

class _UserTextFieldState extends State { @override Widget build(BuildContext context) { return Container( height: 56.0, margin: const EdgeInsets.only(top: 20.0), alignment: Alignment.center, decoration: BoxDecoration( borderRadius: BorderRadius.circular(7.0), color: Colors.white), padding: const EdgeInsets.only(left: 20.0), child: TextField( controller: widget.controller, maxLines: 1, //是否是密码 obscureText: widget.obscureText, style: const TextStyle( fontSize: 17.0, fontFamily: 'QuicksandMedium', color: Color(0xFF4b4b4b)), decoration: InputDecoration( border: InputBorder.none, icon: widget.icon, hintText: widget.hintText, ), ), ); } }

No MediaQuery ancestor could be found? 【Flutter|Flutter使用小技巧三（持续更新）】No MediaQuery ancestor could be found?