颤振行未在非物质应用程序中显示子项答案

【问题标题】：Flutter row not showing children in a non-material app颤振行未在非物质应用程序中显示子项
【发布时间】：2019-07-29 02:18:01
【问题描述】：

我有以下非常简单的 Flutter 代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.green,
        child: Row(
//          mainAxisAlignment: MainAxisAlignment.spaceBetween,
//          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
             Container(
               width: 100,
               height: 100,
               color: Colors.red,
             ),
             Container(
               width: 100,
               height: 100,
               color: Colors.blue,
             ),
          ],
        )
    );
  }
}

我希望看到一个具有绿色背景的应用程序，并且有 2 个方框在一行中。

但是，我似乎只看到绿色背景，没有方框。

我也试过mainAxisAlignment和crossAxisAlignment。

我似乎做错了什么？

文档：

https://api.flutter.dev/flutter/widgets/Row-class.html

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您需要将您的容器包装在 WidgetsApp 或更常用的 MaterialApp 或 CupertinoApp 中，这些材料基于 WidgetsApp 构建。这些小部件提供了 Flutter 应用程序所需的默认配置。如导航行为等，请参阅此链接了解更多信息：https://api.flutter.dev/flutter/widgets/WidgetsApp/WidgetsApp.html

一个工作示例：

import 'package:flutter/material.dart';
//import 'package:flutter/cupertino.dart'; // If using CupertinoApp

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WidgetsApp( // Alternatively replace with MaterialApp or CupertinoApp
      color: Colors.white,
      builder: (context, widget) {
        return Container(
            color: Colors.green,
            child: Row(
              children: <Widget>[
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ],
            )
        );
      },
    );
  }
}

希望这会有所帮助:-)

【讨论】：

【解决方案2】：

我运行了你的代码，它引发了异常

具有多个子级的水平 RenderFlex 的 textDirection 为空，因此未定义布局顺序。

我将 textDirection 添加到 Row 并按预期运行

【讨论】：

感谢这解决了这个问题。我发现在使用flutter attach 时我没有遇到异常。但是当我完全运行时，我得到了例外。你知道为什么这是一个错误吗？

【解决方案3】：

import 'package:flutter/material.dart';
void main() {
  runApp(const  MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.green,
            child: Row(
//          mainAxisAlignment: MainAxisAlignment.spaceBetween,
//          crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。