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

Answer 2

Flutter 有 WidgetSpan() 來在 RichText() 中添加一個小部件。

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: "Click ",
      ),
      WidgetSpan(
        child: Icon(Icons.add, size: 14),
      ),
      TextSpan(
        text: " to add",
      ),
    ],
  ),
)

上面的代碼將產生：

點擊 > 添加

您可以像對待普通小部件一樣對待 WidgetSpan 的子項。

Answer 3

你需要把 sinlein 線crossAxisAlignment: CrossAxisAlignment.start放在 Row 里面

Row (
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
                  Icon(Icons.add, size: 14),
                  Expanded(
                      child: Text("your multiline text "),
                      ),
                    ),
                ],
    
)