當容器行位于包裝的擴展列內時，出現Flutter錯誤“RenderAspectRatio具有無限約束”

在 Flutter 中，我試圖在Expanded包裝列內構建多行容器，該列也在一行內。出于某種原因，它在 上出錯'RenderAspectRatio has unbounded constraints'。我試圖將Expanded小部件移動到代碼上的不同位置，但它仍然會出錯，有時會拋出，

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

我已經嘗試了很多東西，并且在 StackOverflow 和其他地方閱讀了很多關于這些問題的問答，但無濟于事，我仍然沒有解決問題。

這是代碼：

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

); }

我正在嘗試創建如下所示的內容：

uj5u.com熱心網友回復：

我沒有從影像中得到整個想法，但根據我的理解，我是這樣實作的。

由于重復多，有規律，我分別使用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),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            )

標籤：扑 安卓工作室 镖 颤振布局

上一篇：帶有文本的顫動圓圈復選框

下一篇：即使在Dart中有重復，也能找到專案的索引