import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final PageController _controller = PageController();
  int _currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: PageView(
            controller: _controller,
            onPageChanged: (page) => setState(() => _currentPage = page),
            children: [
              Container(
                color: Colors.red.withOpacity(0.25),
                child: Center(child: Text('Page 1')),
              ),
              Container(
                color: Colors.green.withOpacity(0.25),
                child: Center(child: Text('Page 2')),
              ),
              Container(
                color: Colors.blue.withOpacity(0.25),
                child: Center(child: Text('Page 3')),
              ),
            ],
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: List.generate(
            3,
            (i) => Container(
              margin: EdgeInsets.all(4),
              width: 8,
              height: 8,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: _currentPage == i ? Colors.blue : Colors.grey,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

• 在 Flutter 开发中，执行上述代码，出现如下错误信息，且页面显示为空白

Another exception was thrown: Cannot hit test a render box with no size.

问题原因

• 代码直接返回了 Column，这里需要使用 MaterialApp 或 WidgetsApp 的包裹

处理策略

• 使用 MaterialApp 包裹

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final PageController _controller = PageController();
  int _currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Column(
        children: [
          Expanded(
            child: PageView(
              controller: _controller,
              onPageChanged: (page) => setState(() => _currentPage = page),
              children: [
                Container(
                  color: Colors.red.withOpacity(0.25),
                  child: Center(child: Text('Page 1')),
                ),
                Container(
                  color: Colors.green.withOpacity(0.25),
                  child: Center(child: Text('Page 2')),
                ),
                Container(
                  color: Colors.blue.withOpacity(0.25),
                  child: Center(child: Text('Page 3')),
                ),
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: List.generate(
              3,
              (i) => Container(
                margin: EdgeInsets.all(4),
                width: 8,
                height: 8,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: _currentPage == i ? Colors.blue : Colors.grey,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}