Flutter 常见问题汇总

1.GestureDetector在空白的地方无法响应点击事件

添加 behavior: HitTestBehavior.translucent

GestureDetector(
  behavior: HitTestBehavior.translucent,
  // onTap: () {},
  onPanDown: (detail) {
    log('detail:globalPosition.dx=${detail.globalPosition.dx}, globalPosition.dy=${detail.globalPosition.dy}, '
        'localPosition.dy=${detail.localPosition.dy}, localPosition.dx=${detail.localPosition.dx}');
  },
  child: const SizedBox(
    width: double.infinity,
    height: double.infinity,
  ),
),

2.如果在Stack布局中，有一个子widget没有使用postion ，会影响到整个布局的高宽。

3.去除TextField的边框影响，代码可以这样写

InputBorder inputBorder() {
  return const OutlineInputBorder(
    borderSide: BorderSide(width: 0, color: Colors.transparent),
  );
}

InputBorder inputColorBorder() {
  return const OutlineInputBorder(
    borderSide: BorderSide(width: 1, color: AppColor.c_F4F4F4),
  );
}

//无边框的输入框 可以剧中对齐
Widget noBorderTextFiled(
    {double? fontSize,
    TextEditingController? controller,
    Widget? suffix,
    String? hintText,
    double? hintFontSize,
    TextInputType? keyboardType,
    List<TextInputFormatter>? inputFormatters,
    bool readOnly = false,
    TextAlign textAlign = TextAlign.start,
    ValueChanged<String>? onSubmitted,
    TextInputAction? textInputAction}) {
  return TextField(
    textAlign: textAlign,
    readOnly: readOnly,
    controller: controller,
    keyboardType: keyboardType,
    inputFormatters: inputFormatters,
    onSubmitted: onSubmitted,
    textInputAction: textInputAction,
    style: TextStyle(
        textBaseline: TextBaseline.alphabetic,
        fontSize: fontSize,
        color: AppColor.C_141414),
    decoration: InputDecoration(
        contentPadding: const EdgeInsets.all(0),
        suffix: suffix,
        focusedBorder: inputBorder(),
        disabledBorder: inputBorder(),
        errorBorder: inputBorder(),
        focusedErrorBorder: inputBorder(),
        enabledBorder: inputBorder(),
        border: inputBorder(),
        hintText: hintText,
        hintStyle: TextStyle(fontSize: hintFontSize, color: AppColor.c_D1CCD0)),
    autofocus: false,
    maxLines: 1,
  );
}

flutter 中定义自定义弹框，不需要把高宽写死

其实就是使用 Center 将布局放到中间，然后使用Column， 和Row的mainAxisSize: MainAxisSize.min,将使用布局按照所需要的大小来排列。 注意不要使用 Expand，否则会将布局放到最大。

_showDialog() {
  showDialog(
      context: context,
      builder: (context) {
        return Center(
              child:  Column(
                //主要属性
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                        Row(
                        //主要属性
                          mainAxisSize: MainAxisSize.min,
                          children: [
                          ],
                        ),
                  ],
                ),
              );
      },
      barrierDismissible: false);
}

flutter ios编译报错

报错代码如下

[!] CocoaPods could not find compatible versions for pod "xxxxxx":
  In Podfile:
    xxxx (from `.symlinks/plugins/xxxx/ios`)

Specs satisfying the `xxxxx (from `.symlinks/plugins/xxxx

这段报错的意思是说你引入的某个插件和你的平台版本不同

解决方案

我们需要到 ios 下的.symlinks/plugins文件下，找到报错的插件，打开该插件文件夹，找到该插件的podspec，看这个插件支持的平台。然后将你项目的Podfile改成一样的就可以了

flutter上传应用市场被要求上传ipad截图

flutter 创建的时候会被自动创建适配 ipad 和 mac，需要在下方截图，把 ipad 和 mac 移除，再次打包上传就不会出现问题了

ExpansionPanelList 使用问题

1.ExpansionPanelList需要被SingleChildScrollView包裹，否则会出现问题 2.EnhanceExpansionPanel 中 listView 不能滑动，ListView 需要添加如下代码

shrinkWrap: true, physics:ClampingScrollPhysics(),

EnhanceExpansionPanelList(
 dividerColor: AppColor.c_F9F9F9,
 expandedHeaderPadding: EdgeInsets.all(0),
 elevation: 0,
 expansionCallback: (index, isExpand) {
   log('message');
 },
 children: context.read<ShopDataOrderState>().source.map((e) {
   return EnhanceExpansionPanel(
     arrowPosition: EnhanceExpansionPanelArrowPosition.none,
     isExpanded: e.isExpand,
     backgroundColor: AppColor.c_F9F9F9,
     headerBuilder: (BuildContext context, bool isExpanded) {
       return GestureDetector(
         onTap: () {
           context.read<ShopDataOrderState>().setExpand(e);
         },
         child: Stack(
           alignment: Alignment.centerLeft,
           children: [
             Padding(
               padding: EdgeInsets.symmetric(
                 horizontal: 15.w,
               ),
               child: Image.asset(
                 Assets.imagesShopOrderTmp0,
                 width: double.infinity,
                 fit: BoxFit.fitWidth,
               ),
             ),
             textSp(
               e.date,
               20.sp,
               padding: EdgeInsets.only(left: 30.w),
             ),
           ],
         ),
       );
     },
     body: Selector<ShopDataOrderState, int>(
         builder: (_, __, ___) {
           return roundedOnly(
               bottomRight: 5.w,
               bottomLeft: 5.w,
               padding: EdgeInsets.symmetric(vertical: 25.w),
               width: double.infinity,
               margin: EdgeInsets.symmetric(horizontal: 25.w),
               child: SingleChildScrollView(
                 child: Column(
                   crossAxisAlignment:
                       CrossAxisAlignment.center,
                   children: [
                     Padding(
                       padding: EdgeInsets.only(
                           bottom: 15.w, left: 15.w),
                       child: Row(
                         children: [
                           text16sp(
                             '收款净额度',
                           ),
                           text16sp('data'),
                           text16sp('共'),
                           text16sp(
                               e.orderData?.length.toString(),
                               color: AppColor.c_FE2507),
                           text16sp('笔'),
                         ],
                       ),
                     ),
                     e.orderData == null
                         ? text16sp('数据加载中...',
                             color: AppColor.c_999999)
                         : e.orderData!.isEmpty
                             ? text16sp('空空如也',
                                 color: AppColor.c_999999)
                             : MediaQuery.removePadding(
                                 context: context,
                                 removeBottom: true,
                                 removeTop: true,
                                 removeRight: true,
                                 removeLeft: true,
                                 child: ListView.separated(
                                   separatorBuilder:
                                       (BuildContext context,
                                               int index) =>
                                           horizontalLine(
                                               lineColor: AppColor
                                                   .c_999999),
                                   itemBuilder: (context,
                                           index) =>
                                       item(e
                                           .orderData![index]),
                                   shrinkWrap: true,
                                   physics:
                                       ClampingScrollPhysics(),
                                   itemCount:
                                       e.orderData?.length ??
                                           0,
                                 ),
                               )
                   ],
                 ),
               ));
         },
         selector: (_, state) => e.refresh),
   );
 }).toList(),
);