2022年开发笔记第一期

解决 Dart 打印日志打印不全

我们测试了[print] [debugPrint] [log] 三个函数

分别打印 10000行的日志

• 【print】函数打印几百个字符就停止打印
• 【debugPrint】虽然可以打印完毕 但是耗时 40秒
• 【log】瞬间打印完毕

请使用【log】函数打印日志

修复 Center 组件宽度被拉长

我准备封装一个这个组件，高度为固定40，左右的Padding分别为40。

TextButton(
  onPressed: () {},
  child: Container(
    height: 40,
    decoration: BoxDecoration(
      color: Colors.green,
      borderRadius: BorderRadius.circular(4),
    ),
    child: const Center(
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 40),
        child: Text(
          "登录",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    ),
  ),
)

结果按钮宽度被拉伸了。了解可以通过Center.widthFactor属性进行设置。

如果非空，则将其宽度设置为子宽度乘以该因子。

可以大于也可以小于 1.0，但必须为非负数。

TextButton(
  onPressed: () {},
  child: Container(
    height: 40,
    decoration: BoxDecoration(
      color: Colors.green,
      borderRadius: BorderRadius.circular(4),
    ),
    child: const Center(
      widthFactor: 1,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 40),
        child: Text(
          "登录",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    ),
  ),
)

我们设置1 ,代表等于child的宽度。

修复 Column 自动拉伸。

在做这个效果过程中。

Container(
  constraints: const BoxConstraints(
    minHeight: 90,
    minWidth: 90,
  ),
  decoration: BoxDecoration(
    color: Colors.black,
    borderRadius: BorderRadius.circular(4),
  ),
  padding: const EdgeInsets.all(15),
  child: Column(
    children: const [
      CircularProgressIndicator(
        color: Colors.white,
        strokeWidth: 2,
      ),
      SizedBox(
        height: 15,
      ),
      Text(
        "加载中",
        style: TextStyle(color: Colors.white),
      ),
    ],
  ),
)

但是我们的组件纵向铺满了，这不是我们要的效果呀。

MainAxisSize mainAxisSize = MainAxisSize.max,

查询到Column有mainAxisSize属性默认为MainAxisSize.max,那我们设置MainAxisSize.min是不是就可以了呀。

Container(
  constraints: const BoxConstraints(
    minHeight: 90,
    minWidth: 90,
  ),
  decoration: BoxDecoration(
    color: Colors.black,
    borderRadius: BorderRadius.circular(4),
  ),
  padding: const EdgeInsets.all(15),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: const [
      CircularProgressIndicator(
        color: Colors.white,
        strokeWidth: 2,
      ),
      SizedBox(
        height: 15,
      ),
      Text(
        "加载中",
        style: TextStyle(color: Colors.white),
      ),
    ],
  ),
)

showMaterialModalBottomSheet 不支持 Hot Reload

将 showMaterialModalBottomSheet builder内容单独提炼一个Widget即可

Flutter 怎么去掉 AppBar 底部阴影

设置 elevation = 0 即可