我家自动化

这个屌丝很懒，什么也没留下！

热门标签

Flutter知识点_flutter lock

作者：我家自动化 | 2024-07-04 15:48:58

踩

flutter lock

flutter组件库

Flutter 命令行创建项目

可以指定语言: -i -> iOS, -a -> android


flutter create -i objc -a java #项目名# 
flutter create -i swift -a kotlin #项目名#

创建完项目之后, cd到项目文件夹下


// 查看支持的设备
flutter devices
 
// 打开模拟器
flutter emulators --launch apple_ios_simulator
 
//运行项目
flutter run
 
//flutter 清理项目
flutter clean

Column中嵌套Column或者Row中嵌套Row
https://blog.csdn.net/senkai123/article/details/102667479

Flutter 三种方式实现页面切换后保持原页面状态
https://zhuanlan.zhihu.com/p/58582876

flutter中，保存页面的状态issue

使用上面文章中的方法仅仅可以保存 “没有导航栏跳转的情况”，
如果在页面中放置一个按钮然后跳转到子页面，此时外部部分页面如果不做额外处理，则会销毁。

处理方法：


除了要在需要保存状态的widget中混入 AutomaticKeepAliveClientMixin，然后重写 方法：
@override
  bool get wantKeepAlive => true;
 
还要在页面的build方法中，调用 super.build(context); 方法

flutter中使用InkWell给任意Widget添加点击事件

flutter截长图
Flutter之屏幕截图/组件截图 - 简书

json -> dart
https://javiercbk.github.io/json_to_dart/

父控件根据子控件高度自适应
① column中放不可滚动的组件，设置mainAxisSize: MainAxisSize.min即可
② column中放ListView等可以滚动的组件，则除了要设置主轴Size为MainAxisSize.min之外，还要设置ListView的shrinkWrap: true,


这个属性是大部门可以滚动的组件（ListView，GridView）的父类ScrollView的属性，用来确定scrollview的内容高度是否由子组件决定
  /// Whether the extent of the scroll view in the [scrollDirection] should be
  /// determined by the contents being viewed.
 
  /// Defaults to false.
  final bool shrinkWrap;

③ 在自定义iOS样式的AlertController的时候，我使用了AlertDialog -> Column -> ListView这样的布局方式,结果发现会报错
RenderShrinkWrappingViewport does not support returning intrinsic dimensions

Flutter之Dialog使用和踩坑
 flutter Dialog里ListView的问题
 flutter 自定义弹框
 Flutter: ListView in a SimpleDialog

Column、Row对齐方式中spaceBetween, spaceEvenly, spaceAround的对比

flutter调用iOS中api修改：


import UIKit
import Flutter
 
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)
        
        
        let controller : FlutterViewController = window?.rootViewController as! FlutterViewController;
        let batteryChannel = FlutterMethodChannel.init(name: "com.flutter.io/wififx",
                                                       binaryMessenger: controller.binaryMessenger);
        batteryChannel.setMethodCallHandler({
            (call: FlutterMethodCall, result: FlutterResult) -> Void in
            // Handle battery messages.
            if ("getBatteryLevel" == call.method) {
                self.receiveBatteryLevel(result: result);
            } else {
                result(FlutterMethodNotImplemented);
            }
        });
        
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
    
    private func receiveBatteryLevel(result: FlutterResult) {
        let device = UIDevice.current;
        device.isBatteryMonitoringEnabled = true;
        if (device.batteryState == .unknown) {
            result(FlutterError.init(code: "UNAVAILABLE",
                                     message: "电池信息不可用",
                                     details: nil));
        } else {
            result(Int(device.batteryLevel * 100));
        }
    }
}

https://github.com/flutter/flutter/issues/35945

Android Studio打开flutter项目的时候，设备列表那里一直是loading。

解决方法：全凭运气。。。

查找带dart的进程，杀掉，然后重启as
此时命令行执行flutter doctor, 偶然间好了。。
删除 flutter/bin/cache/路径下的lockfile、flutter.bat.lock文件
重启电脑
等着吧。。

https://blog.csdn.net/yueyang6019bo123/article/details/103753239

https://stackoverflow.com/questions/51101178/android-studio-device-list-stuck-on-loading

https://github.com/flutter/flutter-intellij/issues/3892

Flutter i18n 国际化
Flutter_i18n国际化全解 - 简书

Sliver效果的列表添加下拉刷新
https://juejin.im/post/5beb91275188251d9e0c1d73

Use Flutter in China
https://flutter.dev/community/china

属性传值、InheritedWidget、Notification、EventBus区别

原生项目集成flutter之后，页面跳转管理
https://pub.flutter-io.cn/packages/flutter_boost

flutter切换字体
https://blog.csdn.net/emdd2016/article/details/93312143

Android Studio Flutter Shortcut

Flex/Row/Column、 Flexible/Expanded
①. Row、Column 都是继承于 Flex的组件，可以设置子widget的对齐方式
②. Expanded是继承于Flexible的widget，可以看做 flex为1，fit为FlexFit.tight 的Flexible组件
Expanded可以放到①中的组件中：

如果①中子widget有非Flexible的组件，则剩余部分根据Flexible的flex属性，来分配。
如果①中的子widget全都是Flexible的组件，则按照flex的值来分配。

flutter 分享
https://pub.flutter-io.cn/packages/share
Sharesdk

Flutter项目编译报错
Code Sign Error in macOS High Sierra Xcode - resource fork, Finder information, or similar detritus not allowed

Code signing fails with error 'resource fork, Finder information, or similar detritus not allowed' - 简书
 https://developer.apple.com/library/archive/qa/qa1940/_index.html

resource fork, Finder information, or similar detritus not allowed - 简书


cd到你的项目文件夹下；
 
在终端执行下面的代码：
 
xattr -rc .        
// 别忘了后面是有一个点.的
然后，执行 flutter run 就OK了。

相关命令
查看造成错误的文件

xattr -lr <fxeye.app文件的路径>

删除造成错误的文件

xattr -cr <fxeye.app文件路径>

Future、 async、 await

结论：
async是标志方法需要一段时间才能得到返回值。
await字面上意思是等待异步的方法执行完成之后再执行后续代码（会阻塞当前方法）

https://dart.dev/codelabs/async-await#completed
https://blog.csdn.net/yuzhiqiang_1993/article/details/89155870
https://medium.com/@jelenaaa.lecic/when-to-use-async-await-then-and-future-in-dart-5e00e64ab9b1
https://zhuanlan.zhihu.com/p/39999205
https://dart.cn/tutorials/language/futures

Stack的宽高，根据子组件来变化
https://segmentfault.com/q/1010000022210409?utm_source=tag-newest
https://stackoverflow.com/questions/51123939/flutter-stack-size-to-sibling
https://stackoverflow.com/questions/45745448/how-do-i-stretch-an-image-to-fit-the-whole-background-100-height-x-100-width/45745479#45745479

Stack/ IndexedStack
一篇带你看懂Flutter叠加组件Stack

自定义bottomNavigationBar 使用Lottie动画组件

参考插件
FF-Navigation bar
Bottom personalized bot bar
Titled Bottom Navigation Bar
Bubbled Navigation Bar
Bottom NavyBar

Flutter 类中创建私有变量


class FXTabbarItem extends StatefulWidget {
  /// tabbarItem 标题
  String _title;
 
  /// json文件路径
  String _jsonFile;
  Key _itemKey;
 
  /// 点击回调
  VoidCallback _onTapCallBack;
 
  /// 文字常规样式
  final TextStyle titleNormalStyle;
 
  /// 文字选中样式
  final TextStyle titleSelectStyle;
 
  /// 是否是选中状态
  final bool isSelected;
 
  FXTabbarItem({
    @required String title,
    @required String jsonFile,
    @required Key itemKey,
    @required VoidCallback onTap,
    this.isSelected,
    this.titleNormalStyle,
    this.titleSelectStyle,
  })  : _title = title,
        _jsonFile = jsonFile,
        _itemKey = itemKey,
        _onTapCallBack = onTap;
 
  @override
  _FXTabbarItemState createState() => _FXTabbarItemState();
}

如果还有super继承的


class FXDealerDetailHeader extends StatefulWidget {
  final FXTraderModel _traderModel;
 
  FXDealerDetailHeader({Key key, FXTraderModel traderModel})
      : _traderModel = traderModel,
        super(key: key);
 
  @override
  _FXDealerDetailHeaderState createState() => _FXDealerDetailHeaderState();
}

Flutter 获取组件的frame信息

使用GlobalKey，在帧绘制回调的时候获取组件的frame

WidgetsBinding 提供了单次 Frame 绘制回调及实时 Frame 绘制回调两种机制

单次 Frame 绘制回调：通过 addPostFrameCallback 实现。在当前 Frame 绘制完后进行回调，且只会回调一次，如果需要多次回调则需设置多次


WidgetsBinding.instance.addPostFrameCallback((_){
    print("addPostFrameCallback 绘制回调"); // 只回调一次
});

实时 Frame 绘制回调：通过 addPersistentFrameCallback 实现。在每次绘制 Frame 结束后进行回调


WidgetsBinding.instance.addPersistentFrameCallback((_){
    print("addPersistentFrameCallback 绘制回调"); // 每帧都回调
});

使用Builder组件


Builder(
  builder: (context) {
    return IconButton(
      icon: Icon(Icons.flight),
      onPressed: () {
        /// 通过 Builder 组件获取 context即element， 
        /// 再通过element获取renderObject， 即可拿到组件信息
        RenderBox box = context.findRenderObject() as RenderBox;
        var offset = box.localToGlobal(Offset.zero);
        var size = box.currentContext.size；
      },
    );
  },
)

Flutter 文字下面显示双黄线

原因： Text组件，默认使用的是Material节点中的TextStyle，所以我们可以在Text组件外面包裹Material组件

Scaffold


Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Sample Code'),
    ),
    body: Center(
      child: Text('You have pressed the button $_count times.')
    ),
    backgroundColor: Colors.blueGrey.shade200,
    floatingActionButton: FloatingActionButton(
      onPressed: () => setState(() => _count++),
      tooltip: 'Increment Counter',
      child: const Icon(Icons.add),
    ),
  );
}

Material


Widget build(BuildContext context) {
    return Material(
        type: MaterialType.transparency,
        child: Container()
    );
}

修改Text的style


Text("Text Content",
  style: TextStyle(
    decoration: TextDecoration.none,
  )
);

Flutter Text底部黄色双划线 - 简书

Flutter Text TextOverflow.ellipsis 默认按单词切割

问题描述 https://github.com/flutter/flutter/issues/18761

考虑替代方案： https://pub.dev/packages/assorted_layout_widgets

Flutter VS Code 编译器有选中的代码块的时候无代码提示问题

在设置中搜索 prevent，然后在 Editor > Suggest: Snippets Prevent Quick Suggestions前面，把√去掉即可

https://blog.csdn.net/qq972618478/article/details/97665271

30 Best Flutter App Templates in 2020
https://flutterawesome.com/30-best-flutter-app-templates-in-2020/

Flutter 绘制虚线

两种方法：

使用canvas绘图的时候绘制，此时要依赖第三方库来实现：
https://pub.flutter-io.cn/packages/path_drawing#-readme-tab-
使用widget层的listView来构建Widget
https://stackoverflow.com/questions/54019785/how-to-add-line-dash-in-flutter

一个类似iOS JXCategoryView LineView效果的tabbar

https://github.com/flutter-studio/animated_interpolation
路径： /lib/smart_tabbar.dart

Flutter BezierPath 实现类似iOS strokeEnd 动画效果


    Path path = Path();
    path.moveTo(0, size.height / 2);
    //直线测试
    // path.lineTo(size.width / 2, size.height / 2);
    // path.lineTo(size.width, 0);
 
    //曲线测试,    ⚠️⚠️ Flutter使用和 iOS一样的绘图坐标系 ⚠️⚠️
    path.addArc(
        Rect.fromCenter(
            center: Offset(size.width / 2, size.height / 2),
            width: size.width,
            height: size.height),
        0,
        -pi/2);
 
    var pathMetrics = path.computeMetrics(forceClosed: false);
    var list = pathMetrics.toList();
    var length = progress * list.length.toInt();
    Path newPath = new Path();
    for (int i = 0; i < length; i++) {
      var extractPath = list[i]
          .extractPath(0, list[i].length * progress, startWithMoveTo: true);
      newPath.addPath(extractPath, Offset(0, 0));
    }
 
    canvas.drawPath(newPath, paint);

参考： Flutter篇（二）绘制贝塞尔曲线、折线、柱状图，支持触摸 - 简书

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/787443