当容器行位于包装的扩展列内时出现 Flutter 错误 'RenderAspectRatio has unbounded constraints'

Question

在 Flutter 中，我试图在 Expanded 包装列内构建容器行，该包装列也在一行内。由于某种原因，它在 'RenderAspectRatio has unbounded constraints' 上出错。我试图将 Expanded 小部件移动到代码中的不同位置，但它有时会继续出错，

"RenderFlex children have non-zero flex but incoming height constraints are unbounded"

我尝试了很多东西，我在 Whosebug 和其他地方阅读了很多关于问题的问答，但无济于事，我仍然没有解决问题。

代码如下：

      Row(
          mainAxisAlignment: MainAxisAlignment.end,
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      GestureDetector(
                        onTap: () {
                          print('Just clicked on 7');
                        },
                        child: Align(
                          alignment: Alignment.center,
                          child: AspectRatio(
                            aspectRatio: 1,
                            child: Container(
                              color: Colors.yellow,
                              margin: const EdgeInsets.all(1.0),
                              child: const AutoSizeText(
                                '7',
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    fontSize: 300.0, color: Colors.black45),
                              ),
                            ),
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          print('Just clicked on 7');
                        },
                        child: Align(
                          alignment: Alignment.center,
                          child: AspectRatio(
                            aspectRatio: 1,
                            child: Container(
                              color: Colors.yellow,
                              margin: const EdgeInsets.all(1.0),
                              child: const AutoSizeText(
                                '7',
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    fontSize: 300.0, color: Colors.black45),
                              ),
                            ),
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          print('Just clicked on 7');
                        },
                        child: Align(
                          alignment: Alignment.center,
                          child: AspectRatio(
                            aspectRatio: 1,
                            child: Container(
                              color: Colors.yellow,
                              margin: const EdgeInsets.all(1.0),
                              child: const AutoSizeText(
                                '7',
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    fontSize: 300.0, color: Colors.black45),
                              ),
                            ),
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          print('Just clicked on 7');
                        },
                        child: Align(
                          alignment: Alignment.center,
                          child: AspectRatio(
                            aspectRatio: 1,
                            child: Container(
                              color: Colors.yellow,
                              margin: const EdgeInsets.all(1.0),
                              child: const AutoSizeText(
                                '7',
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    fontSize: 300.0, color: Colors.black45),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  //Expanded(
                  //child:
                  GestureDetector(
                    onTap: () {
                      print('Just clicked on 8');
                    },
                    child: AspectRatio(
                      aspectRatio: 1,
                      child: Container(
                        color: Colors.cyan,
                        margin: const EdgeInsets.all(1.0),
                        child: const AutoSizeText(
                          '8',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              fontSize: 300.0, color: Colors.black45),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    ),
  ),
),

); }

我正在尝试创建如下所示的内容：

Answer 1

我没有从图像中得到完整的想法，但根据我的理解，我是这样实现的。

由于重复较多且有规律，所以分别使用GridView和ListView

class NumbersGridView extends StatelessWidget {
  const NumbersGridView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Expanded(
          child: GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 10,
                mainAxisSpacing: 20,
              ),
              itemCount: 30,
              itemBuilder: (buildContext, index) {
                return InkWell(
                  onTap: () {
                    print(index);
                  },
                  child: AspectRatio(
                    aspectRatio: 1,
                    child: Container(
                      color: Colors.cyan,
                      margin: const EdgeInsets.all(1.0),
                      child: AutoSizeText(
                        index.toString(),
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                            fontSize: 300.0, color: Colors.black45),
                      ),
                    ),
                  ),
                );
              }),
        ),
        Container(width: 20.0, child: VerticalDivider(color: Colors.red)),
        Flexible(
          child: SizedBox(
            width: 50.0,
            child: ListView.builder(
                itemCount: 5,
                physics: const NeverScrollableScrollPhysics(),
                itemBuilder: (buildContext, index) {
                  return Container(
                    height: 40.0,
                    width: 40.0,
                    alignment: Alignment.center,
                    color: Colors.cyan,
                    child: AutoSizeText(
                      index.toString(),
                      textAlign: TextAlign.center,
                      style: const TextStyle(color: Colors.black45),
                    ),
                  );
                }),
          ),
        )
      ],
    );
  }
}

如果您想像最初尝试的那样实现它，这里是没有指定错误的代码。

Row(
              mainAxisAlignment: MainAxisAlignment.end,
              mainAxisSize: MainAxisSize.min,
              children: [
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Expanded(
                            child: GestureDetector(
                              onTap: () {
                                print('Just clicked on 7');
                              },
                              child: Align(
                                alignment: Alignment.center,
                                child: AspectRatio(
                                  aspectRatio: 1,
                                  child: Container(
                                    color: Colors.yellow,
                                    margin: const EdgeInsets.all(1.0),
                                    child: const AutoSizeText(
                                      '7',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                          fontSize: 300.0,
                                          color: Colors.black45),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: GestureDetector(
                              onTap: () {
                                print('Just clicked on 7');
                              },
                              child: Align(
                                alignment: Alignment.center,
                                child: AspectRatio(
                                  aspectRatio: 1,
                                  child: Container(
                                    color: Colors.yellow,
                                    margin: const EdgeInsets.all(1.0),
                                    child: const AutoSizeText(
                                      '7',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                          fontSize: 300.0,
                                          color: Colors.black45),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: GestureDetector(
                              onTap: () {
                                print('Just clicked on 7');
                              },
                              child: Align(
                                alignment: Alignment.center,
                                child: AspectRatio(
                                  aspectRatio: 1,
                                  child: Container(
                                    color: Colors.yellow,
                                    margin: const EdgeInsets.all(1.0),
                                    child: const AutoSizeText(
                                      '7',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                          fontSize: 300.0,
                                          color: Colors.black45),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: GestureDetector(
                              onTap: () {
                                print('Just clicked on 7');
                              },
                              child: Align(
                                alignment: Alignment.center,
                                child: AspectRatio(
                                  aspectRatio: 1,
                                  child: Container(
                                    color: Colors.yellow,
                                    margin: const EdgeInsets.all(1.0),
                                    child: const AutoSizeText(
                                      '7',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                          fontSize: 300.0,
                                          color: Colors.black45),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      //Expanded(
                      //child:
                      GestureDetector(
                        onTap: () {
                          print('Just clicked on 8');
                        },
                        child: AspectRatio(
                          aspectRatio: 1,
                          child: Container(
                            color: Colors.cyan,
                            margin: const EdgeInsets.all(1.0),
                            child: const AutoSizeText(
                              '8',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontSize: 300.0, color: Colors.black45),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            )