时间戳

首页 > 解决方案 > Row() 中的容器在 Flutter 中不起作用

flutter - Row() 中的容器在 Flutter 中不起作用

问题描述

我是 Flutter 的新手，我正在制作一些随机块来练习我的已知知识。我试图制作三列，其中最后一列将包含两行，它们都在一列中，并且它们在一个卡片小部件中。我的列工作正常，但我的行容器不工作。作为一个新手，我无法理解我在哪里以及我错过了什么或我做错了什么。

我试图制作这个视图 截图

这是我的代码-->

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Container(
                  alignment: Alignment.topCenter,
                  color: Colors.red,
                  height: 100,
                ),
                Container(
                  alignment: Alignment.topCenter,
                  color: Colors.green,
                  height: 100,
                ),
              ],
            ),
            Row(
              //mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                  alignment: Alignment.topCenter,
                  color: Colors.yellow,
                  height: 100,
                ),
                Container(
                  alignment: Alignment.topCenter,
                  color: Colors.black,
                  height: 100,
                ),
                TextButton(
                  child: const Text('Button'),
                  onPressed: () {},
                ),
                const SizedBox(width: 8),
                TextButton(
                  child: const Text('Button'),
                  onPressed: () {},
                ), //Checking if Text button is working or Not
                const SizedBox(width: 8),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

标签： flutter

解决方案

您应该将文本“Button”作为子项提供给 Container，而不是像 TextButton 这样的单独的 Widget。此外，您还没有为 Container 提供任何宽度，这就是为什么您什么都看不到的原因。您可以执行以下操作：

              Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    alignment: Alignment.topCenter,
                    color: Colors.yellow,
                    child: Center(child: const Text('Button')),
                  height: 100,

                  ),
                ),
                Expanded(
                  child: Container(
                    alignment: Alignment.topCenter,
                    color: Colors.black,
                    height: 100,
                    child: Center(
                      child: const Text('Button',
                   style:TextStyle(color:Colors.white)),
                    ),

                  ),
                ),
              ],
            ),

推荐阅读