Flutter - 如何在一行中显示文本和图标？

Question

我正在使用带有三个子小部件的行小部件:
文本
图标
文本

我希望所有这些都水平出现在同一级别的单行中，如果文本增加，则下降到新行。

我正在为 Row 小部件使用以下代码，但最后一个 Text 小部件未正确对齐


文本放置应从“Tap ”下方开始，并且“on the right hand ”未对齐

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

Answer 1

使用 Text.rich与 WidgetSpan将图标放在文本中(内联)

Text.rich(
  TextSpan(
    style: TextStyle(
      fontSize: 17,
    ),
    children: [
      TextSpan(
        text: 'Tap',
      ),
      WidgetSpan(
        child: Icon(Icons.add),
      ),
      TextSpan(
        text: 'on the right hand corner to start a new chat.',
      )
    ],
  ),
)