代码之家 › 专栏 › 技术社区 › Yahya Uddin

不给孩子看的划船

flutter-layout flutter

Yahya Uddin · 技术社区 · 5 年前

我有以下非常简单的颤振代码:

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,
             ),
          ],
        )
    );
  }
}

我希望看到一个绿色背景的应用程序,以及一行中的两个方形框。

然而,我似乎只看到绿色的背景,没有盒子。

我也尝试过 mainAxisAlignment 和 crossAxisAlignment .

我好像做错了什么?

文件:

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

0 回复 | 直到 5 年前

Franken Frank 5 年前

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

具有多个子级的水平RenderFlex的文本方向为空,因此布局顺序未定义。

我向行中添加了textDirection,它按预期运行

Tor-Martin Holen 5 年前

您需要将容器包装在WidgetsApp或更常用的基于WidgetsApp的材料app或CupertinoApp中。这些小部件提供颤振应用程序所需的默认配置。如导航行为等,请参阅此链接以获取更多信息: 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,
                ),
              ],
            )
        );
      },
    );
  }
}

希望这有帮助:-)

推荐文章

mana · 如何通过单击底部导航项之一打开模态?

1 年前