首页 > 解决方案 > 颤振行未在非物质应用程序中显示子项

问题描述

我有以下非常简单的 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 个方框。

但是,我似乎只看到绿色背景,没有盒子。

我也尝试过mainAxisAlignmentcrossAxisAlignment

我似乎做错了什么?

文件:

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

标签: flutterflutter-layout

解决方案


您需要将容器包装在 WidgetsApp 或更常用的基于 WidgetsApp 的 MaterialApp 或 CupertinoApp 中。这些小部件提供了 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,
                ),
              ],
            )
        );
      },
    );
  }
}

希望这可以帮助 :-)


推荐阅读