“RenderFlex 溢出”换行文本抖动答案

【问题标题】：A "RenderFlex overflowed " wrap text flutter“RenderFlex 溢出”换行文本抖动
【发布时间】：2021-07-30 04:37:58
【问题描述】：

我都，我想在 RichText 中的 textSpan 中换行，

我正在寻找的是列表视图中的一种卡片，其中每张卡片都有一张图片，底部是线性渐变，上面有菜的名称，以及其他信息

这是我的代码：

class DishWidgetFul extends StatefulWidget {
  final DishModel dishModel;

  const DishWidgetFul({Key key, this.dishModel}) : super(key: key);
  @override
  _DishWidgetFulState createState() => _DishWidgetFulState();
}

class _DishWidgetFulState extends State<DishWidgetFul> {

  @override
  Widget build(BuildContext context)  {
    final userProvider = Provider.of<UserProvider>(context);

    return  Padding(
      padding: const EdgeInsets.only(top:2, left:2, right: 2, bottom: 4),
      child: GestureDetector(
        onTap: () {},
        child: Stack(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(0),
              child: ClipRRect(
                  borderRadius: BorderRadius.circular(20.0),
                  child: Stack(
                    children: <Widget>[
                      Positioned.fill(child: Align(
                        alignment: Alignment.center,
                        child: Container(
                            height: 120,
                            child: Loading()),
                      )),
                      Center(
                            child: FadeInImage.memoryNetwork(placeholder: kTransparentImage, image: widget.dishModel.image),
                          )
                    ],
                  )),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[

                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      width: 50,
                      decoration: BoxDecoration(
                        color: white,
                        borderRadius: BorderRadius.circular(5),
                      ),
                      child: Row(
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.all(2.0),
                            child: Icon(
                              Icons.star,
                              color: Colors.yellow[900],
                              size: 20,
                            ),
                          ),
                          Text(widget.dishModel.rating.toString()),
                        ],
                      ),
                    ),
                  ),
                  widget.dishModel.isLiked ? SmallButton(Icons.favorite,) : Container(),
                ],
              ),
            ),
            Positioned.fill(
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    height: 100,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(20),
                          bottomRight: Radius.circular(20),
                        ),
                        gradient: LinearGradient(
                          begin: Alignment.bottomCenter,
                          end: Alignment.topCenter,
                          colors: [
                            Colors.black.withOpacity(0.8),
                            Colors.black.withOpacity(0.7),
                            Colors.black.withOpacity(0.6),
                            Colors.black.withOpacity(0.4),
                            Colors.black.withOpacity(0.1),
                            Colors.black.withOpacity(0.05),
                            Colors.black.withOpacity(0.025),
                          ],
                        )),
                  ),
                )),
            /*Container(
              height: 30,
              child: Marquee(
                text: 'There once was a boy who told this story about a boy: "',
                scrollAxis: Axis.horizontal,
              ),
            ),*/
            Positioned.fill(
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[


                      Padding(
                        padding: const EdgeInsets.fromLTRB(12, 8, 8, 8),
                        child: RichText(
                          text: TextSpan(
                              children: [

                            TextSpan(
                                text: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\n",
                                style: TextStyle(
                                    fontSize: 20,
                                    fontWeight: FontWeight.bold),
                            ),
                            TextSpan(
                                text: "Price:  ",
                                style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w300)),
                            TextSpan(
                                text: "€ ${widget.dishModel.price/100} \n",
                                style: TextStyle(fontSize: 16)),
                          ], style: TextStyle(color: white)),
                        ),
                      ),
                    ],
                  ),
                ))
          ],
        ),
      ),

    );
  }
}

这就是我得到的

我正在寻找的是 2 种不同的解决方案 1（最好的）获得一个从右到左的移动文本 2 文本较大时换行。

有人可以帮助我吗？

【问题讨论】：

标签： android ios flutter dart text

【解决方案1】：

我修复了它：

              RichText(
                text: TextSpan(
                  text: "Test"
                ),
              )

添加 RichText 就可以了。

【讨论】：

【解决方案2】：

您可以使用Wrap 小部件。 Wrap 小部件如果它们太大而无法放入父 Widget 给定的空间，则将其包裹起来。

这是一个演示它的示例代码。

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Wrap widget'),
      ),
      body: Container(
        color: Colors.red,
        width: 100,
        height: 100,
        child: Wrap(
          children: [
            Text('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'),
            Text(' bbbbb'),
            Text(' ccccc'),
          ],
        ),
      ),
    );
  }
}

这里Container 的宽度和高度是固定的，Wrap 内部有一个巨大的字符串，在Container 内部。

您可以找到Wrap小部件详细信息here

输出：

【讨论】：

我只是添加宽度：MediaQuery.of(context).size.width*0.9,

【解决方案3】：

您可以使用RichText 拥有的maxLines 或overflow 属性，以获取更多信息https://api.flutter.dev/flutter/widgets/RichText-class.html

【讨论】：

overlow 处理文本溢出的位置，maxLines 处理你想要的文本行数
不幸的是不起作用，它总是返回渲染错误。