时间戳

首页 > 解决方案 > 如何在 Flutter 中排列盒子？

flutter - 如何在 Flutter 中排列盒子？

问题描述

这是我垂直排列盒子的代码。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  Widget box({width: 100.0, height: 100.0}) => Container(
        width: width,
        height: height,
        color: Colors.grey,
      );

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          box(),
          box(),
          box(),
        ],
      ),
    );
  }
}

由于我对 CSS flexbox 有一点经验，将 Column 小部件替换为 Row 以将框排列在行中但它不起作用。只出现了黑屏。我已经确保代码在 MaterialApp 小部件下工作。

出于学习目的，我想让代码尽可能简单。

我需要什么才能使上述代码正常工作？最低要求是什么？或者在这种情况下是否有其他适合 root 的小部件？

感谢您抽出时间阅读我的问题！

标签： flutter

解决方案

你需要一个材质应用程序渲染颜色和东西

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
        home: Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          box(),
          box(),
          box(),
                          ],
               ),
             );
       );
  }
}

推荐阅读