[移动开发]Flutter使用小技巧三（持续更新）

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

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

//使用Flexible包裹
Row(
  children: <Widget>[
    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: <Widget>[
            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: <Widget>[
            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的网络请求

需进行如下配置

1. 创建network_security_config.xml. (res/xml)
2. 配置 <application android:networkSecurityConfig="@xml/network_security_config">...

<?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>

获取当前系统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<UserTextField> {
  @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?

No MediaQuery ancestor could be found?

void main() => runApp(const MaterialApp(home: HomePage()));