响应式行颤动

Question

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

Screenshot overflow

另见下面的代码

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

Answer 1

使用 Expanded Widget 作为行的子项，因此它们只使用可用的 space:

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

结果：

响应式行颤动

Responsive Row Flutter

row

responsive-design

flutter

flutter-test

flutter-layout