Flutter开发练习八：实用技巧与填坑

terry 2年前 (2023-09-23) 阅读数 64 #移动小程序

1. Text的TextOverflow.ellipsis不生效

有时我们给Text设置ellipsis却发现不生效。，但下图左侧会出现关于 overfilled 的警告。

其实大多数时候，这是判断第RenderParagraph时的Text的内部RenderParagraph。 th; 当、size.width 和 textSize.width 相等时。

所以需要为Text指定一个容器来限制大小，或者将❀❀ in❀ in

Extended + `容器` 限制`文本`。

2。获取控件

看过第六篇文章的同学应该知道，我们可以通过GlobalKey来获取控件对象的BuildContext，之前我们也说过， BuildContext的实现实际上是element，element持有renderObject。所以我们所知道的RenderObject实际上是RenderBox。所以通过RenderBox我们只知道大小和位置：

  showSizes() {
    RenderBox renderBoxRed = fileListKey.currentContext.findRenderObject();
    print(renderBoxRed.size);
  }

  showPositions() {
    RenderBox renderBoxRed = fileListKey.currentContext.findRenderObject();
    print(renderBoxRed.localToGlobal(Offset.zero));
  }
复制代码

`3。获取状态栏高度和安全布局`

如果你看过MaterialApp的源代码，你应该看到里面有一个WidgetsApp和，MediaQuery ，熟悉的朋友都知道，我们可以通过MediaQuery.of(context).size获取屏幕尺寸。

实际上，MediaQuery是一个继承的Widget，它有一个名为aa的参数。这个参数设置如下图，然后通过源码我们知道，一般来说，MediaQueryDatas padding和

和❀就是顶栏。 
这就是我们通过MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top获取状态栏高度的方法。当然，有时候我们还得考虑参数viewInsets。 
至于AppBar的高度，默认为Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ??0.0)),,, kToolbarHeight 是固定数据，当然你可以通过实现PreferredSizeWidget来自定义AppBar。 
同时，布局时可能会发现有时布局位置异常，从状态栏开始计算。此时必须使用SafeArea进行嵌套。至于为什么，看源码。您会发现MediaQueryData的存在。 ？  进入设置状态栏颜色。 
但是如果你不想使用AppBar，那么你可以接下来AnnotatedRegion❝system iOverlayStyle你可以快速设置线路的状态和底部导航栏。
同时，你也可以通过SystemChrome.setSystemUIOverlayStyle来设置，前提是你不使用AppBar。 需要注意的是，所有状态栏设置都是全局的，如果在A页面设置，而B页面没有手动设置或使用AppBar，则此设置将直接出现在B页面。 
 5.系统字体缩放
现代手机普遍提供字体缩放功能，这给应用程序开发的适配增加了一些工作量，所以大多数时候我们会选择禁止应用程序跟随系统字体缩放。 
在Flutter中，字体缩放还与MediaQueryDatas textScaleFactor有关。所以我们可以通过将以下代码设置放在所需页面的最外层，将字体设置为默认不允许缩放。 
    MediaQuery(
      data: MediaQueryData.fromWindow(WidgetsBinding.instance.window).copyWith(textScaleFactor: 1),
      child: new Container(),
    );
复制代码
6，边距和填充
当我们使用container

时，我们经常使用参数Margin和❝实际上，在上一篇文章中，我们如前所述，Container其实只是各种布局的封装。内部的margin和padding实际上是通过Padding实现的❝支持负数，所以如果需要使用负数，建议使用变换。 ？实现。 
一种方法是使用ClipRRect。 b 这种类型的实现通常是直接的 Can vas 绘制时，因为当前控件的Background 舍入不会影响其子项。这意味着如果child是图像或者也有背景颜色，圆角的效果很可能会消失。 而ClipRRect的效果会影响child。仔细看看下面的 RenderObject 源代码。 ？ 。因为当前版本是1.2，在KeepAlive状态下，如果直接跨两个以上页面切换tab，TarBarView会导致页面和然后重新initState  。虽然 TarBarView 也包裹在 PageView + TabBar 中。 
可以直接使用PageView + TabBar来实现，然后使用(_page)。 tabs) th * index) ;
可以避免一些问题。此时失去的当然是动画效果。实际上，TarBarView只是PageView + TabBar❀的一层包装。 除了这个，其实还有一个办法，使用下面的PageStorageKey来保持页码状态，但是因为是存储和恢复值，所以s 扔 - 每次都会再次调用该方法。 
    return new Scaffold(
      key: new PageStorageKey<your value type>(your value)
    )
复制代码
9。延迟加载 
Flutter 可以通过FutureBuilder或StreamBuilder通过❀❙或stream轻松实现延迟加载 “异步”获取数据，然后加载通过AsyncSnapshot的数据。至于流式和异步这两个术语，我们稍后会详细介绍。
10。 Android 返回键返回桌面
Flutter 已经正式为您提供了 android_intent 插件。此时返回桌面可以通过如下方式实现： 
  Future<bool> _dialogExitApp(BuildContext context) async {
    if (Platform.isAndroid) {
      AndroidIntent intent = AndroidIntent(
        action: 'android.intent.action.MAIN',
        category: "android.intent.category.HOME",
      );
      await intent.launch();
    }

    return Future.value(false);
  }
·····
 return WillPopScope(
      onWillPop: () {
        return _dialogExitApp(context);
      },
      child:xxx);
作者：连毛德小果
链接：https://juejin.im/post/5c9e328251882567b91e1cf来源e1cf：版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明来源。