Flutter实现屏幕垂直三等分显示不同颜色时出现白屏问题求助

嘿，我来帮你排查下这个白屏问题～你现在遇到的情况，其实是因为Widget树的基础结构不完整导致的。Flutter要求咱们的应用根组件必须包裹在MaterialApp（或者适配iOS的CupertinoApp）里面，而且通常需要用Scaffold来提供页面的基础布局容器，直接返回Row的话，缺少正确的Material上下文支撑，就会出现显示异常啦。

咱们来调整下代码结构，把你的三等分布局放到正确的容器里：

import 'package:flutter/material.dart';

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

class DivideVertically3EqualParts extends StatefulWidget {
  const DivideVertically3EqualParts({super.key});

  @override
  State<DivideVertically3EqualParts> createState() =>
      _DivideVertically3EqualPartsState();
}

class _DivideVertically3EqualPartsState
    extends State<DivideVertically3EqualParts> {
  @override
  Widget build(BuildContext context) {
    // 新增MaterialApp作为根组件，嵌套Scaffold提供页面基础结构
    return MaterialApp(
      home: Scaffold(
        body: Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.orange,
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.white,
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.green,
              ),
            )
          ],
        ),
      ),
    );
  }
}

给你拆解下修改的核心点：

• MaterialApp：这是Material风格应用的核心根组件，负责提供主题、路由等基础配置，没有它的话，很多Material组件都无法正常渲染。
• Scaffold：它是Material设计的标准页面容器，包含了body、appBar等区域，把你的Row放到它的body里，就能让三个彩色区块正常显示出来了。

修改后运行代码，就能看到屏幕被垂直分成三等分，依次显示橙色、白色和绿色啦～

备注：内容来源于stack exchange，提问作者YASH KHOKHAR