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

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

Row(

mainAxisAlignment: MainAxisAlignment.start,

mainAxisSize: MainAxisSize.min,

children: [

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,

),

),

)

],

)

解决方案

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

)

],

),

)

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐