Flutter 疑难杂症集合

一. Flutter集成uni小程序sdk

1. 手机连接电脑测试打开uni小程序没问题，打包成apk后debug编译下的apk也没问题，但就是release编译的apk包打不开小程序。
报错情景：点击后页面会闪现一下黑色的背景，然后又跳转回了点击之前的页面。
原因：开启了混淆（minifyEnabled true）但又没有把混淆规则文件放入到指定的android目录中。
解决：
打开android/app/build.gradle文件
minifyEnabled 设置成false，或者把uni小程序sdk中的proguard.cfg文件放入到指定目录中。

buildTypes {
        release {
        	// 注意点：minifyEnabled 混淆和shrinkResources移除无用资源需同时为true或false，否则可能导致编译失败！
            minifyEnabled false  //是否进行混淆
            shrinkResources false  //删除无用资源
            //指定混淆规则文件
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro', 'proguard.cfg'
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }

2. minifyEnabled 混淆和shrinkResources移除无用资源值不相同时有可能会导致编译报错。

landeMacBook-Pro:life_app lan$ flutter build apk


FAILURE: Build failed with an exception.

* Where:
Build file '/Users/lan/Desktop/flutter-demo/life_app/android/build.gradle' line: 25

* What went wrong:
A problem occurred evaluating root project 'android'.
> A problem occurred configuring project ':app'.
   > com.android.builder.errors.EvalIssueException: Removing unused resources requires unused code shrinking to be turned on. See http://d.android.com/r/tools/shrink-resources.html for more information.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

3.打开小程序后页面空白

解决：
主要查看项目中有条件编译的代码。
比如引入echart的条件编译代码。

// #ifdef VUE2
import * as echarts from "@/uni_modules/lime-echart/static/echarts.min";
// #endif

// #ifdef VUE3
// #ifdef MP
const echarts = require("../../uni_modules/lime-echart/static/echarts.min");
// #endif

// #ifndef MP
import * as echarts from "echarts";
import {
  BarChart,
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineChart,
  LineSeriesOption,
  GaugeChart,
} from "echarts/charts";
import {
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  // 数据集组件
  DatasetComponent,
  DatasetComponentOption,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent,
  LegendComponent,
  ToolboxComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
// type ECOption = echarts.ComposeOption<
//   | BarSeriesOption
//   | LineSeriesOption
//   | TitleComponentOption
//   | TooltipComponentOption
//   | GridComponentOption
//   | DatasetComponentOption
// >;

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent,
  ToolboxComponent,
  GaugeChart,
]);
// #endif
// #endif

二. 样式

1 实现磨砂玻璃效果
理想的效果

用BackdropFilter()方法之后父控件树也受到影响。

BackdropFilter(
 filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
 child: SizedBox(
   width: 327.w,
   height: 48.h,
   // color: Colors.white,
   child: const Row(
     children: [Text('aaa')],
   ),
 ))

解决方法：
可以使用ClipRect小部件将BackdropFilter小部件裁剪到其子小部件的边界。

ClipRRect(
 child: BackdropFilter(
     filter:
         ImageFilter.blur(sigmaX: 10, sigmaY: 10),
     child: SizedBox(
       width: 327.w,
       height: 48.h,
       // color: Colors.white,
       child: const Row(
         children: [Text('aaa')],
       ),
     )))