flutter - 如何在行中扩展长文本之后放置一个小部件？

Question

如何将动态长文本与另一个小部件（如按钮）展开成这样的一行：

---

我尝试了Expanded，我没有得出结论。FlexibleWarp

！注意我不希望它在一个Stack或Padding从底部使用！导致这个文本有会改变，它的长度可能更大或更短。

---

更新：我尝试使用 ExtendedText，但 TextOverFlowWidget 的孩子没有显示给我。我的代码：

Container(
  color: Colors.amber,
  height: 70,
  child: ExtendedText(
    'bbbbb ${toPhoneStyle(widget.inputPhone)}  (${widget.selectedCountry.dialCode})  aaaaaa aaaaaaaaaaa',
     overflowWidget: TextOverflowWidget(
        // maxHeight: double.infinity,
        // align: TextOverflowAlign.right,
        // fixedOffset: Offset.zero,
        child: Container(
            width: 60,
            height: 60,
            color: Colors.red,
            ),
         ),
      ),
   ),

---

但是如果像 Container 一样缩小高度height:20，显示如下：

Answer 1

显然，您可以使用RichText小部件将文本和小部件包装在一行中，即它旨在使用多种显示样式显示文本。<TextSpan>使用或类型的子级呈现文本<WidgetSpan>。

以下代码将解释您在问题中尝试的确切内容。请注意，我只使用了有状态小部件，因为我也在使用其他东西，所以我只编辑了该小部件中的所有内容，如果您不打算在此处引入任何状态，则可以使用无状态小部件。

完整代码：

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    home: Home(),
  ));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final String str = 'Some really long text to show the working of a wrap widget'
      + ' and place a button at the end of the text and it will then prove that'
      + ' you can do the same with other kind of widgets.';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Container(
            width: (MediaQuery.of(context).size.width) / 1.3,
            decoration: BoxDecoration(
              color: Colors.orange[100],
            ),
            child: RichText(
              text: TextSpan(
                children: [
                  TextSpan(
                    text: str,
                    style: TextStyle(
                      fontSize: 24,
                      color: Colors.black,
                    ),
                  ),
                  // treat the child of WidgetSpan as the parameter to insert
                  // whatever widget you wish to put here
                  // SizedBox is only used to put a little space after the text string
                  WidgetSpan(
                    child: SizedBox(width: 5,),
                  ),
                  WidgetSpan(
                    child: Container(
                      child: RaisedButton(
                        color: Colors.blueAccent,
                        onPressed: (){},
                        child: Text('Button'),
                      ),
                    ),
                  ),
                ]
              ),
            ),
          ),
        ),
      ),
    );
  }
}

渲染后的结果：

Answer 2

试试这个：扩展文本包

您可以使用一个溢出小部件。

检查他们的例子：

ExtendedText(...
        overFlowWidget:
            TextOverflowWidget(
                //maxHeight: double.infinity,
                //align: TextOverflowAlign.right,
                //fixedOffset: Offset.zero,
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const Text('\u2026 '),
                    RaisedButton(
                      child: const Text('more'),
                      onPressed: () {
                        launch(
                            'https://github.com/fluttercandies/extended_text');
                      },
                    )
                  ],
                ),
              ),
        ...
      )

---

好的，原来您需要指定 maxLines 才能使溢出正常工作。我认为您会选择跟随文本的小部件。您可以尝试 Text.rich() 小部件

Text.rich(
  TextSpan(
    text: 'This is an example text!',
    children: [
      WidgetSpan(
        // Set the alignment
        alignment: PlaceholderAlignment.middle,
        // You can put any widget inline with text using WidgetSpan
        child: Container(
          margin: const EdgeInsets.only(left: 8.0),
          child: ElevatedButton(
            child: Text("Read more..."),
            onPressed: () {},
          ),
        ),
      ),
    ],
  ),
);

在这种情况下，您不需要扩展文本包。