Flutter-如何在一行中显示文本和图标? [英] Flutter - How to show text and icon in one line in row?

问题描述

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

I am using row widget with three child widgets: Text Icon Text

我希望所有这些字符都水平显示在同一行的单行中，如果文本增加，请放到新行.

I want all of them to appear in single line same level horizontally and drop to new line if text increases.

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

I am using below code for Row widget but last Text widget is not aligned correctly

放置文字的位置应从"Tap"下方开始，并且"on the right hand"未对齐

The text dropping should start below the "Tap" and "on the right hand" is not aligned

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

推荐答案

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

Use Text.rich with WidgetSpan to put icon inside text (inline)

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

这篇关于Flutter-如何在一行中显示文本和图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！