Question

我正在尝试实现简单的一两行文本。文本将具有开始文本，然后是图标，以及结束文本。由于样式不同，我正在使用带有文本，图标和文本小部件的行。我收到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,
                  ),
                ),
              ),
            ),
          ],
        ),

    ),

Here's a codepen of it working

Answer 2

您无需对列中的行使用任何[flexed]，[expanded，Flexible等]伸缩功能，因为默认情况下，行采用了按列可用的最大宽度

您收到一条错误消息，因为您的行子宽度超过了可用的屏幕尺寸

您可以对扩展的行中的宽度较大的子项使用扩展，将子级以可用宽度包装在一行中。

行引起的Renderflex溢出

2 个答案: