使用扩展小部件时什么都不可见答案

【问题标题】：Nothing is visible when expanded widget is used使用扩展小部件时什么都不可见
【发布时间】：2022-01-01 02:33:37
【问题描述】：

我正在尝试将扩展小部件用于示例项目。我在列小部件中嵌入了一行作为 chldren 。在行内，我使用了带有 flex 属性的扩展小部件。但是在删除 Expanded 后，我无法在屏幕上看到任何内容。我尝试将 Expanded 放在列之前，它也显示相同的错误。这是我的代码：-

import 'package:flutter/material.dart';

void main() => runApp(
    const MaterialApp(home: MyApp())
);

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded Column Sample'),
      ),
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
              children:[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.green,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.deepOrange,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.white,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.lightGreenAccent,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.blue,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.red,
                      ),
                    ),
                  ],
                ),
              ]
            ),

        ),
      );
  }
}

【问题讨论】：

标签： android flutter dart

【解决方案1】：

您的代码看起来不错。只是，容器没有内容，因此高度为零。例如，将它们包装在 SizedBox 中，或添加子项：

简短提示：

您可能希望每个容器具有相同的宽度，因此为每个 Expanded 小部件提供相同的弹性系数是正确的。但这个值不一定要等于Row中的子节点数。


import 'package:flutter/material.dart';

void main() => runApp(
    const MaterialApp(home: MyApp())
);

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded Column Sample'),
      ),
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
              children:[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.green,
                        child: Text('1'),
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.deepOrange,
                        child: Text('2'),
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: SizedBox(
                        height: 20,
                        child: Container(
                          color: Colors.white,
                        ),
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.lightGreenAccent,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.blue,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.red,
                      ),
                    ),
                  ],
                ),
              ]
            ),

        ),
      );
  }
}

【讨论】：

【解决方案2】：

这里的问题是扩展小部件的高度没有限制，因此它们没有计算尺寸，因此不会被绘制

为了执行布局，Flutter 以深度优先遍历的方式遍历渲染树，并将大小约束从父级传递到子级。在确定它的大小时，孩子必须尊重其父母给予它的约束。子级通过在父级建立的约束范围内向其父级对象传递一个大小来响应。

所以你需要做的是要么用 Expanded 小部件包装行，要么用 Container 包装它并指定高度

如果用 Expanded 小部件包裹，它会是这样的

如果它被 Container 包裹，高度限制为 100px

【讨论】：

【解决方案3】：

尝试为 ROW 中的容器指定一些高度和宽度。

【讨论】：

行中元素的宽度应该由flex因子来处理。