行導致的 Renderflex 溢出

Question

我正在嘗試實現簡單的一兩行文本。 文本將有一個起始文本，然后是圖標和結束文本。由於 styles 不同，我正在使用帶有文本、圖標和文本小部件的行。 我A RenderFlex overflowed by 16 pixels on the right. 錯誤。 我將行括在靈活和擴展中，但仍然無法正常工作。 我只是希望文本在行尾下降到下一行。

Container(
      padding: EdgeInsets.only(
        left: 20,
        right: 20,
      ),
      width: mdq.size.width,
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(


              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text(
                    'Tap ',
                    style: TextStyle(
                      fontSize: 17,
                    ),
                  ),
                  Icon(Icons.add),
                  Text(
                    'on the right hand corner to start a new chat.',
                    style: TextStyle(
                      fontSize: 17,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(
                vertical: 15,
              ),
              child: Text(
                'You can communicate with the user who have installed Just Meetups and Deals app',
                style: TextStyle(
                  color: Colors.grey,
                  fontSize: 16,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(
                vertical: 15,
              ),
              child: InkWell(
                onTap: () {},
                child: Text(
                  'Start communicating',
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    color: Colors.blue,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ],
        ),

    );

Answer 1

使用Expanded小部件

Container(
      padding: EdgeInsets.only(
        left: 20,
        right: 20,
      ),
      width: MediaQuery.of(context).size.width,
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text(
                    'Tap ',
                    style: TextStyle(
                      fontSize: 17,
                    ),
                  ),
                  Icon(Icons.add),
                  Expanded(
                  child: Text(
                    'on the right hand corner to start a new chat.',
                    style: TextStyle(
                      fontSize: 17,
                    ),
                  ),
                  )
                ],
              ),
            Container(
              margin: EdgeInsets.symmetric(
                vertical: 15,
              ),
              child: Text(
                'You can communicate with the user who have installed Just Meetups and Deals app',
                style: TextStyle(
                  color: Colors.grey,
                  fontSize: 16,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(
                vertical: 15,
              ),
              child: InkWell(
                onTap: () {},
                child: Text(
                  'Start communicating',
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    color: Colors.blue,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ],
        ),

    ),

這是它的工作代碼

Answer 2

您不需要對列中的行使用任何像 [Expanded, Flexible, etc] 這樣的 flex，因為行默認采用列可用的最大寬度

您收到錯誤，因為您的行子寬度大於可用的屏幕尺寸

• 您可以將 Expanded 用於 Expanded中大寬度行的子代，以將子代包裹在行內的可用寬度中。