如何在跨越几行的文本小部件上使用省略号?

问题描述 投票:0回答:1

即使文本环绕多行,文本溢出也带有省略号,会在第一行剪切文本。另一方面,带有淡入淡出的溢出会渲染所有文本行,然后在最后一行上应用淡入淡出。

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

enter image description here enter image description here

代码:

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

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

flutter flutter-layout ellipsis text-widget
1个回答
0
投票

在文本小部件中设置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,
),

希望这会有所帮助!

© www.soinside.com 2019 - 2024. All rights reserved.