flutter - TextSpan 的文字不显示是否溢出并放在 WidgetSpan 之后

问题描述

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

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

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

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

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

这是 Container 小部件的最小代码。

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

标签： flutterdartformatting

这是你想要的吗？
我使用 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),
            ),
          ),
        ],
      ),
    );
  }
}

flutter - TextSpan 的文字不显示是否溢出并放在 WidgetSpan 之后

问题描述

解决方案

推荐阅读