Класс WidgetSpan
Класс WidgetSpan расширяет InlineSpan:
вместо букв в абзаце рисуется дочерний виджет.
Виджет передают в child, выравнивание по строке - в alignment,
базовая линия - в baseline. Стиль строки вокруг виджета
можно задать через style.
Синтаксис
WidgetSpan(
child: Icon(Icons.star),
alignment: PlaceholderAlignment.middle,
)
Параметры
| Параметр | Описание |
|---|---|
child |
Виджет, который встанет в текстовую строку. |
alignment |
Как виджет выравнивается относительно строки.
Принимает PlaceholderAlignment.
|
baseline |
Какую базовую линию шрифта использовать.
Принимает TextBaseline.
Имеет смысл, когда alignment равен
PlaceholderAlignment.baseline.
|
style |
Стиль текста рядом с виджетом. Принимает
TextStyle.
|
Пример
Давайте поставим иконку между двумя словами:
import 'package:flutter/material.dart';
void main()
{
runApp(
MaterialApp(
home: Scaffold(
body: Center(
child: RichText(
text: TextSpan(
style: TextStyle(fontSize: 18, color: Colors.black),
children: [
TextSpan(text: 'abcde'),
WidgetSpan(
child: Icon(Icons.star, size: 18, color: Colors.orange),
alignment: PlaceholderAlignment.middle,
),
TextSpan(text: '12345'),
],
),
),
),
),
),
);
}
На экране между строками 'abcde' и '12345'
появится звёздочка по центру строки.
Пример
Давайте вставим цветной квадрат в текст:
import 'package:flutter/material.dart';
void main()
{
runApp(
MaterialApp(
home: Scaffold(
body: Center(
child: RichText(
text: TextSpan(
style: TextStyle(fontSize: 16, color: Colors.black),
children: [
TextSpan(text: 'abcde '),
WidgetSpan(
child: Container(
width: 12,
height: 12,
color: Colors.red,
),
alignment: PlaceholderAlignment.middle,
),
TextSpan(text: ' 12345'),
],
),
),
),
),
),
);
}
На экране в строке между словами будет маленький красный квадрат.
