响应式行颤动答案

【问题标题】：Responsive Row Flutter响应式行颤动
【发布时间】：2021-11-13 05:59:35
【问题描述】：

使该行具有响应性的最佳方法是什么？我遇到的问题之一是如果团队名称有很多字符，那么就会出现溢出像素错误。看截图

另见下面的代码

child: Row(
                //mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const SizedBox(
                    child: Padding(
                      padding: EdgeInsets.all(10.0),
                      child: Text(
                        'Bosnia and Herzegovina',
                        style: TextStyle(
                          fontFamily: 'Poppins',
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    child: Image.network(
                      'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Flag_of_Bosnia_and_Herzegovina.svg/1920px-Flag_of_Bosnia_and_Herzegovina.svg.png',
                      height: 50,
                      fit: BoxFit.cover,
                    ),
                  ),
                  Card(
                    child: Container(
                      width: 70,
                      color: Colors.amber,
                      child: const Padding(
                          padding: EdgeInsets.all(10.0),
                          child: Text(
                            "4:0",
                            textAlign: TextAlign.center,
                          )),
                    ),
                  ),
                  SizedBox(
                    child: Image.network(
                      'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Flag_of_the_Czech_Republic.svg/1920px-Flag_of_the_Czech_Republic.svg.png',
                      height: 50,
                      fit: BoxFit.cover,
                    ),
                  ),
                  const SizedBox(
                    child: Padding(
                      padding: EdgeInsets.all(10.0),
                      child: Text(
                        'Czech Republic',
                        style: TextStyle(
                          fontFamily: 'Poppins',
                        ),
                      ),
                    ),
                  )
                ],
              ),

【问题讨论】：

标签： flutter responsive-design flutter-layout row flutter-test

【解决方案1】：

使用 Expanded Widget 作为行的子级，因此它们只占用可用空间：

Row(
      //mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        const Expanded(
          child: SizedBox(
            child: Padding(
              padding: EdgeInsets.all(10.0),
              child: Text(
                'Bosnia and Herzegovina',
                style: TextStyle(
                  fontFamily: 'Poppins',
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: SizedBox(
            child: Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Flag_of_Bosnia_and_Herzegovina.svg/1920px-Flag_of_Bosnia_and_Herzegovina.svg.png',
              height: 50,
              fit: BoxFit.cover,
            ),
          ),
        ),
        Expanded(
          child: Card(
            child: Container(
              width: 70,
              color: Colors.amber,
              child: const Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text(
                    "4:0",
                    textAlign: TextAlign.center,
                  )),
            ),
          ),
        ),
        Expanded(
          child: SizedBox(
            child: Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Flag_of_the_Czech_Republic.svg/1920px-Flag_of_the_Czech_Republic.svg.png',
              height: 50,
              fit: BoxFit.cover,
            ),
          ),
        ),
        const Expanded(
          child: SizedBox(
            child: Padding(
              padding: EdgeInsets.all(10.0),
              child: Text(
                'Czech Republic',
                style: TextStyle(
                  fontFamily: 'Poppins',
                ),
              ),
            ),
          ),
        )
      ],
    ),

结果：

您可以在一列内添加一行并设置扩展小部件的弹性：

Column(

      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Row(

        children: [
          Expanded(
            flex: 2,
            child: SizedBox(
              child: Image.network(
                'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Flag_of_Bosnia_and_Herzegovina.svg/1920px-Flag_of_Bosnia_and_Herzegovina.svg.png',
                height: 50,
              ),
            ),
          ),
          Expanded(
            flex: 1,
            child: Card(
              child: Container(
                width: 70,
                color: Colors.amber,
                child: const Padding(
                    padding: EdgeInsets.all(10.0),
                    child: Text(
                      "4:0",
                      textAlign: TextAlign.center,
                    )),
              ),
            ),
          ),
          Expanded(
            flex: 2,
            child: SizedBox(
              child: Image.network(
                'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Flag_of_the_Czech_Republic.svg/1920px-Flag_of_the_Czech_Republic.svg.png',
                height: 50,
              ),
            ),
          ),

        ],
      ),
        Row(
          children: [
            const Expanded(
              flex: 2,
              child: SizedBox(
                child: Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text(
                    'Bosnia and Herzegovina',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontFamily: 'Poppins',
                    ),
                  ),
                ),
              ),
            ),
            Expanded(
              flex: 1,
                child: Container()
            ),
            const Expanded(
              flex: 2,
              child: SizedBox(
                child: Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text(
                    'Czech Republic',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontFamily: 'Poppins',
                    ),
                  ),
                ),
              ),
            )
          ],
        )
    ]
    ),

结果：

【讨论】：

感谢您提供的详细信息绝对有帮助，并将我添加到正确的方向。