Question

如何将Flutter上的文本小部件截断为特殊数字..并以例如...“查看更多”或一些点“ ...”结尾查看更多，也可以将这些点与AlertDialog小部件连接以查看全文。谢谢帮助我。

Answer 1

按照下面的步骤

第1步：添加DescriptionTextWidget

import 'package:flutter/material.dart';

class DescriptionTextWidget extends StatefulWidget {
  final String text;

  DescriptionTextWidget({this.text});

  @override
  _DescriptionTextWidgetState createState() => _DescriptionTextWidgetState();
}

class _DescriptionTextWidgetState extends State<DescriptionTextWidget>
    with TickerProviderStateMixin<DescriptionTextWidget> {
  bool isExpanded = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[
      AnimatedSize(
          vsync: this,
          duration: const Duration(milliseconds: 500),
          child: InkWell(
            onTap: () {
              setState(() {
                isExpanded = !isExpanded;
              });
            },
            child: Container(
              child: RichText(
                text: TextSpan(
                  style: Theme.of(context).textTheme.body1,
                  children: [
                    TextSpan(
                        text: isExpanded
                            ? widget.text
                            : ((widget.text.length > 350)
                                ? widget.text.substring(0, 350)
                                : widget.text),
                       ),
                    WidgetSpan(
                      alignment: PlaceholderAlignment.top,
                      child: (widget.text.length > 150)
                          ? Icon(
                              isExpanded
                                  ? Icons.keyboard_arrow_up
                                  : Icons.keyboard_arrow_down,
                              color: FFB1B1BD,
                              size: 25,
                            )
                          : Container(
                              width: 0,
                              height: 0,
                            ),
                    )
                  ],
                ),
              ),
            ),
          ))
    ]);
  }
}

第2步：使用

 DescriptionTextWidget(
        text:
            "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.",
      )

将文本截断为特定数字Flutter Text小部件

1 个答案: