TextSpan的文字溢出不显示，放在WidgetSpan之后

Question

这是一个非常具体的场景，我不太确定确切的原因。代码如下。总结一下：我创建了一个 Container 小部件，设置了一个特定的宽度值，然后将 RichText 小部件设置为它的子部件。使用两个 InlineSpans 填充 RichText。一个 WidgetSpan 和一个 TextSpan。 TextSpan 在 WidgetSpan 之后。如果 InlineSpans 的内容宽度超过 Container 的宽度且 maxLines 设置为 1；只显示WidgetSpan，完全不显示TextSpan

我只想在容器内显示尽可能多的文本，然后以我为 RichText 选择的任何溢出选项结束。我尝试了不同的溢出选项，其中 none 改变了结果。我的首选选项是 TextOverflow.ellipsis，但除 TextOverflow.clip 之外的其他选项也可以。

我必须使用 WidgetSpan 将图标字符垂直居中。如果有任何其他方法可以做到这一点，我会完全接受它。

下图是宽度值为 250 的满载容器。字体大小在下面的代码部分给出。 WidgetSpan 字符是随机选择的，更改字符不能解决问题。

这是宽度值为 240 的容器。如您所见，它溢出了，TextSpan 的文本完全消失了。 WidgetSpan 按目的右对齐，更改对齐方式不会改变结果。

这是容器小部件的最少代码。

Container(
    width: 250,
    child: RichText(
        maxLines: 1,
        text: TextSpan(
            children: [
                WidgetSpan(
                    alignment: PlaceholderAlignment.middle,
                    child: Text(String.fromCharCode(1005),
                        style: TextStyle(
                        color: Colors.black,
                        fontSize: 25))
                        ),
                TextSpan(
                    text: 'wwwwwwwwwwwwwwwwwwww',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 15),
                )
            ]
        ),
    ),
),

Answer 1

这是你想要的吗？
我使用 Row 小部件而不是 RichText。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _buildBody() {
    return Container(
      width: 250,
      child: Row(
        children: [
          Text(
            String.fromCharCode(1005),
            style: TextStyle(color: Colors.black, fontSize: 25),
          ),
          Expanded(
            child: Text(
              'wwwwwwwwwwwwwwwwwwwwwwwwww',
              overflow: TextOverflow.ellipsis,
              style: TextStyle(color: Colors.black, fontSize: 15),
            ),
          ),
        ],
      ),
    );
  }
}

TextSpan的文字溢出不显示，放在WidgetSpan之后

TextSpan's text doesn't show if it overflows and is placed after WidgetSpan

formatting

dart

flutter