Unhandled Exception: Cannot hit test a render box with no size

使用列表时，如果直接使用listView，flutter不能命中没有大小的渲染框。

比如下面这个例子，错误的做法：

import 'package:flutter/material.dart';
import 'package:flutter_practice/practice-advanced/router/event-bus-ex.dart';
import 'package:flutter_practice/practice-advanced/router/gesture-detector-ex.dart';
import 'package:flutter_practice/practice-advanced/router/pointer-event-ex.dart';
import 'package:flutter_practice/practice-advanced/router/notification-ex.dart';
import 'my-route.dart';
import 'my-expansion-panel.dart';

class MyRouteGroup {
  MyRouteGroup(
      {@required this.groupName,
      @required this.icon,
      @required this.routes,
      this.isExpanded});

  final String groupName;
  final Widget icon;
  final List<MyRoute> routes;
  bool isExpanded = false;
}

List<MyRouteGroup> myAppAdvancedRoutes = [
  MyRouteGroup(
      groupName: '事件处理与通知',
      icon: Icon(Icons.drag_handle),
      routes: <MyRoute>[
        MyRoute(
          child: PointerEventExample(),
          title: '原始指针事件处理',
        ),
        MyRoute(
          child: GestureDetectorExample(),
          title: '手势识别',
        ),
        MyRoute(
          child: EventBusExample(),
          title: '全局事件总线',
        ),
        MyRoute(
          child: NotificationExample(),
          title: '通知(Notification)',
        ),
      ]),
  MyRouteGroup(groupName: '动画', icon: Icon(Icons.animation), routes: <MyRoute>[
    MyRoute(
      child: PointerEventExample(),
      title: '动画结构',
    ),
    MyRoute(
      child: GestureDetectorExample(),
      title: '自定义路由过渡动画',
    ),
    MyRoute(
      child: EventBusExample(),
      title: 'hero动画',
    ),
    MyRoute(
      child: NotificationExample(),
      title: '交织动画',
    ),
    MyRoute(
      child: NotificationExample(),
      title: '动画过渡组件',
    ),
  ]),
];

class PracticeAdvancedPage extends StatefulWidget {
  PracticeAdvancedPageState createState() => PracticeAdvancedPageState();
}

class PracticeAdvancedPageState extends State {
  Widget build(BuildContext context) {
    // const demos = [
    //   {'key': 'counter', 'component': CounterDemo},
    //   {'key': 'use_package', 'component': CounterDemo},
    //   {'key': 'tapbox_state', 'component': CounterDemo},
    // ];
    return Container(
      padding: EdgeInsets.all(16.0),
      child: ExpansionPanelList(
        expansionCallback: (int panelIndex, bool isExpanded) {},
        children: myAppAdvancedRoutes.map((group) {
          return ExpansionPanel(
            headerBuilder: (BuildContext context, bool isExpanded) {
              return ListTile(title: Text(group.groupName));
            },
            body: ListView(
              padding: EdgeInsets.all(8),
              children: group.routes
                  .map((er) => ListTile(title: Text(er.title)))
                  .toList(),
            ),
            isExpanded: false,
          );
        }).toList(),
      ),
    );
  }
}

这是正确的做法：

import 'package:flutter/material.dart';
import 'package:flutter_practice/practice-advanced/router/event-bus-ex.dart';
import 'package:flutter_practice/practice-advanced/router/gesture-detector-ex.dart';
import 'package:flutter_practice/practice-advanced/router/pointer-event-ex.dart';
import 'package:flutter_practice/practice-advanced/router/notification-ex.dart';
import 'my-route.dart';

class MyRouteGroup {
  MyRouteGroup(
      {@required this.groupName,
      @required this.icon,
      @required this.routes,
      this.isExpanded});

  final String groupName;
  final Widget icon;
  final List<MyRoute> routes;
  bool isExpanded = false;
}

List<MyRouteGroup> myAppAdvancedRoutes = [
  MyRouteGroup(
      groupName: '事件处理与通知',
      icon: Icon(Icons.drag_handle),
      isExpanded: false,
      routes: <MyRoute>[
        MyRoute(
          child: PointerEventExample(),
          title: '原始指针事件处理',
        ),
        MyRoute(
          child: GestureDetectorExample(),
          title: '手势识别',
        ),
        MyRoute(
          child: EventBusExample(),
          title: '全局事件总线',
        ),
        MyRoute(
          child: NotificationExample(),
          title: '通知(Notification)',
        ),
      ]),
  MyRouteGroup(
      groupName: '动画',
      icon: Icon(Icons.animation),
      isExpanded: false,
      routes: <MyRoute>[
        MyRoute(
          child: PointerEventExample(),
          title: '动画结构',
        ),
        MyRoute(
          child: GestureDetectorExample(),
          title: '自定义路由过渡动画',
        ),
        MyRoute(
          child: EventBusExample(),
          title: 'hero动画',
        ),
        MyRoute(
          child: NotificationExample(),
          title: '交织动画',
        ),
        MyRoute(
          child: NotificationExample(),
          title: '动画过渡组件',
        ),
      ]),
];

class PracticeAdvancedPage extends StatefulWidget {
  PracticeAdvancedPageState createState() => PracticeAdvancedPageState();
}

class PracticeAdvancedPageState extends State {
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child: Container(
      child: ExpansionPanelList(
        expansionCallback: (int panelIndex, bool isExpanded) {
          print(panelIndex);
          print(isExpanded);
          setState(() {
            myAppAdvancedRoutes[panelIndex].isExpanded = !isExpanded;
          });
        },
        children: myAppAdvancedRoutes.map((group) {
          return ExpansionPanel(
            headerBuilder: (BuildContext context, bool isExpanded) {
              return ListTile(title: Text(group.groupName));
            },
            body: Container(
              height: (group.routes.length * 50)
                  .toDouble(), // 这里必须告诉flutter高度， 否则不渲染
              child: ListView(
                padding: EdgeInsets.all(8),
                children: group.routes
                    .map((er) => ListTile(title: Text(er.title)))
                    .toList(),
              ),
            ),
            isExpanded: group.isExpanded,
          );
        }).toList(),
      ),
    ));
  }
}

SingleChildScrollView 包起会滚动的组件， List渲染时，设置好height。

全部代码访问： flutter实战