1

第一行带有省略号剪切文本的文本溢出,即使文本换行了几行。
另一方面,使用淡入淡出的溢出会在最后一行应用淡入淡出之前渲染所有文本行。

我希望省略号应用于文本字段的最后一行。
左:省略号,右:淡入淡出

在此处输入图像描述 在此处输入图像描述

代码:

class _LockedCardState extends State<LockedCard> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 250,
      child: Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Stack(
          fit: StackFit.expand,
          children: [
            Image.network(
              widget.imgUrl,
              fit: BoxFit.cover,
            ),
            Container(color: Color(0x40000000)),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12.0),
              child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 16.0),
                    child: Text(widget.cardTitle,
                        style: Theme.of(context).textTheme.title.copyWith(color: Colors.white)),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: Text(
                        widget.cartBody,
                        style: Theme.of(context).textTheme.body1.copyWith(color: Colors.white),
                        softWrap: true,
                        overflow: TextOverflow.ellipsis, //Overflow breaks on first line, even if softWrap = true.
                        textAlign: TextAlign.justify,
                      ),
                    ),
                  ),
                  Center(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 8.0, bottom: 16.0),
                      child: Align(
                        alignment: Alignment.bottomRight,
                        child: AppButtonSmall(
                          onPress: widget.onPress,
                          title: widget.buttonTitle,
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

仅当最后一行溢出时,如何应用省略号?

4

1 回答 1

1

在文本小部件中设置 maxLines 属性。

Text(
  widget.cartBody,
  style: Theme.of(context).textTheme.body1.copyWith(color: Colors.white),
  softWrap: true,
  overflow: TextOverflow.ellipsis, //Overflow breaks on first line, even if softWrap = true.
  textAlign: TextAlign.justify,

  maxLines: 9,
),

希望这可以帮助!

于 2019-10-15T11:43:44.367 回答