Question

我使用以下代码嵌套了行：

    Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Row(
        children: <Widget>[
          Icon(Icons.fiber_manual_record),
          Text(
            'the text in the first row',
          ),
        ],
      ),
      Row(
        children: <Widget>[
          Icon(Icons.fiber_manual_record),
          Text(
            'the text in the second row',
          ),
        ],
      ),
    ],
  )

有空间时，我希望行并排（当前行为）：

当前，当它溢出时，文本将被切断，如下所示：

有没有办法在没有空间的情况下将第二行强制换行，所以看起来像这样？

Answer 1

            Row(
          children: [
            Checkbox(
              onChanged: (bool value) {},
              value: true,
            ),
            Flexible(
              child: RichText(
                strutStyle: StrutStyle(height: 1.4),
                softWrap: true,
                text: TextSpan(style: TextStyle(fontSize: 12, color: ColorUtil.hexToColor("#999999")), children: <InlineSpan>[
                  TextSpan(text: "ฉันได้อ่านและยอมรับ "),
                  TextSpan(text: "ฉันได้อ่านและยอมรับ "),
                  TextSpan(
                      text: "สัญญาการให้บริการ & ข้อตกลงความเป็นส่วนตัว",
                      style: TextStyle(color: ColorUtil.hexToColor("#666666")),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          Navigator.pushNamed(context, "/profile/terms_policy");
                        }),
                ]),
              ),
            )
          ],
        ),

这对我有用。灵活包裹

Answer 2

这些行上的东西会起作用：

Wrap(
      direction: Axis.horizontal,
      children: <Widget>[
        Wrap(
          children: <Widget>[
            Icon(Icons.fiber_manual_record),
            Text(
              'the text ',
            ),
          ],
        ),
        Wrap(
          children: <Widget>[
            Icon(Icons.fiber_manual_record),
            Text(
              'more the text in the first row',
            ),
          ],
        ),
        Wrap(
          children: <Widget>[
            Icon(Icons.fiber_manual_record),
            Text(
              'the text in the second row',
            ),
          ],
        ),
        Wrap(
          children: <Widget>[
            Icon(Icons.fiber_manual_record),
            Text(
              'more text in the second row',
            ),
          ],
        ),
        Wrap(
          children: <Widget>[
            Icon(Icons.fiber_manual_record),
            Text(
              'the text in the third row',
            ),
          ],
        ),
      ],
    )

Answer 3

试试看！它对我有用。

new Flexible(child: new Text('Auto wrap'))

Answer 4

如果你用 Text 包裹 Padding 小部件，在 Flexible 周围添加 Padding 就可以了。

          Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Icon(
                  Icons.check,
                  color: Colors.green,
                ),
                SizedBox(
                  width: 16,
                ),
                Flexible(
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(0, 8, 0, 0),
                    child: Text(
                      'Some text',
                      style: TextStyle(
                          fontSize: 18, color: Colors.white),
                    ),
                  ),
                ),
              ],
            ),

文本换行小部件

4 个答案: