Flutter中为Widget加点击事件报错：BoxConstraints含NaN高度值

问题场景 #

尝试用GestureDetector为VerticalCardPager添加点击功能时，出现如下Flutter错误，移除GestureDetector后应用恢复正常：

FlutterError (BoxConstraints has NaN values in minHeight and maxHeight.
The offending constraints were:
  BoxConstraints(w=Infinity, NaN<=h<=NaN; NOT NORMALIZED))

相关代码 #

主页面代码 #

import 'package:flutter/material.dart';
import 'package:vertical_card_pager/vertical_card_pager.dart';
import 'models/hero_model.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<HeroModel> heros = [
    HeroModel("JETT", "images/jett_valo.gif"),
    HeroModel("KILLJOY", "images/killjoy_valo.gif"),
    HeroModel("SAGE", "images/sage_valo.gif"),
    HeroModel("SOVA", "images/sova_valo.gif"),
    HeroModel("VIPER", "images/viper_valo.gif"),
    HeroModel("RAZE", "images/raze_valo.gif"),
    HeroModel("YORU", "images/yoru_valo.gif"),
    HeroModel("BREACH", "images/breach_valo.gif"),
    HeroModel("ASTRA", "images/astra_valo.gif"),
    HeroModel("CYPHER", "images/cypher_valo.gif"),
    HeroModel("OMEN", "images/omen_valo.gif"),
    HeroModel("PHOENIX", "images/phoenix_valo.gif"),
    HeroModel("SKYE", "images/skye_valo.gif"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Column(
      children: [
        SizedBox(
          width: double.infinity,
          height: 70,
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 5),
            child: Center(
              child: Image.asset(
                "images/logo.png",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        // 出错的CardView代码
        GestureDetector(
            onTap: () {},
            child: Expanded(
                child: VerticalCardPager(
              titles: [for (var hero in heros) hero.title],
              images: [
                for (var hero in heros)
                  Hero(
                    tag: hero.title,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(20.0),
                      child: Image.asset(
                        hero.image,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
              ],
              textStyle: const TextStyle(
                  color: Colors.white, fontWeight: FontWeight.bold),
              initialPage: 2,
              align: ALIGN.CENTER,
            )))
      ],
    )));
  }
}

HeroModel类代码 #

import 'package:flutter/cupertino.dart';

class HeroModel {
  late String title;
  late String image;

  HeroModel(this.title, this.image);
}

问题原因 #

Expanded是专门为Row/Column/Flex设计的组件，必须作为它们的直接子组件才能正确计算可用空间。原代码中GestureDetector把Expanded包裹起来，导致Expanded失去了和Column的直接关联，无法正确获取布局约束，进而产生NaN的高度值。

解决方案 #

将GestureDetector移动到Expanded内部，直接包裹VerticalCardPager，让Expanded保持作为Column的直接子组件：

修改后的CardView部分代码：

// 修复后的CardView代码
Expanded(
  child: GestureDetector(
    onTap: () {
      // 在这里添加点击逻辑
    },
    child: VerticalCardPager(
      titles: [for (var hero in heros) hero.title],
      images: [
        for (var hero in heros)
          Hero(
            tag: hero.title,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: Image.asset(
                hero.image,
                fit: BoxFit.cover,
              ),
            ),
          ),
      ],
      textStyle: const TextStyle(
          color: Colors.white, fontWeight: FontWeight.bold),
      initialPage: 2,
      align: ALIGN.CENTER,
    ),
  ),
)

这样Expanded能正常和Column交互计算布局空间，GestureDetector也能为VerticalCardPager添加点击事件，同时避免了约束错误。

内容的提问来源于stack exchange，提问作者Mikael David