dart 展开、收起功能时,Text中部分标签处理不掉问题解决

我遇到的问题在使用html字符串时,是引入了html插件,但是在做一个展开、收起时,收起状态对

标签不解析问题。
收起状态下,因为要用到Text的maxLines: 3,,所以不能使用Html(),我这里遇到的只有

标签没有被解析,而且只展示三行数据,展示信息较少,万一我直接针对字符串进行处理,替换掉

,`String shortText = _text.replaceAll(’

’, ‘’);
具体代码如下:

KnowMore(summary:collegeMsg['summary']),
class KnowMore extends StatefulWidget {
  String summary;
  KnowMore({this.summary});
  @override
  _KnowMoreState createState() => _KnowMoreState();
}

class _KnowMoreState extends State<KnowMore> {


  // 当前是否已是 "全文" 状态
  bool mIsExpansion = false;

  //最大显示行数(默认 3 行)
  int mMaxLine = 3;

//_text:显示的文字
  Widget _RichText(String _text) {
    String  shortText = _text.replaceAll('<p>', '');
    if (IsExpansion(_text)) {
//      //如果需要截断
      if (mIsExpansion) {
        return Column(
          children: <Widget>[
            Html(
              data: '${_text}',
            ),
            // new Text(
            //   _text,
            //   textAlign: TextAlign.left,
            // ),
            Align(
              alignment: Alignment.centerRight,
              child: FlatButton(
                onPressed: () {
                  _isShowText();
                },
                child: Text(
                  "收起",
                  style:TextStyle(
                    color:Colors.blue,
                  ),
                ),
                //textColor: SQColor.grey,
              ),
            ),
          ],
        );
      } else {
        return Column(
          children: <Widget>[
            // Html(
            //   data: _text,
            // ),

            new Text(
              '${shortText}',
              maxLines: 3,
              textAlign: TextAlign.left,
              overflow: TextOverflow.ellipsis,
            ),
            Align(
              alignment: Alignment.centerRight,
              child: FlatButton(
                onPressed: () {
                  _isShowText();
                },
                child: Text(
                  "展开",
                  style:TextStyle(
                    color:Colors.blue,
                  ),
                ),
                //textColor: SQColor.grey,
              ),
            ),
          ],
        );
      }
    } else {
      return Text(
        _text,
        maxLines: 3,
        textAlign: TextAlign.left,
        overflow: TextOverflow.ellipsis,
      );
    }
  }

  bool IsExpansion(String text) {
    TextPainter _textPainter = TextPainter(
        maxLines: 3,
        text: TextSpan(
            text: text, style: TextStyle(fontSize: 16.0, color: Colors.black)),
        textDirection: TextDirection.ltr)
      ..layout(maxWidth: MediaQuery.of(context).size.width, minWidth: 300);
    if (_textPainter.didExceedMaxLines) {//这里判断 文本是否截断
      return true;
    } else {
      return false;
    }
  }

  void _isShowText() {
    if (mIsExpansion) {
      //关闭了
      setState(() {
        mIsExpansion = false;
      });
    } else {
      setState(() {
        mIsExpansion = true;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      //height:100,
      child:_RichText(widget.summary),
    );
  }
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter,您可以使用`TableCalendar`日历库来实现自定义的日历功能。要在日历添加一个控制按钮,以便在收起状态下显示当前一行日期并在点击展开,您可以按照以下步骤进行操作: 首先,您需要添加所需的依赖项。在您的`pubspec.yaml`文件,将`table_calendar`库添加为依赖项: ```yaml dependencies: flutter: sdk: flutter table_calendar: ^2.3.3 ``` 然后,运行`flutter pub get`以获取依赖项。 接下来,您可以在您的代码创建一个`TableCalendar`小部件,并使用`TableCalendar`库的回调函数来控制日历的展开收起状态。以下是一个简单的示例: ```dart import 'package:flutter/material.dart'; import 'package:table_calendar/table_calendar.dart'; class CalendarPage extends StatefulWidget { @override _CalendarPageState createState() => _CalendarPageState(); } class _CalendarPageState extends State<CalendarPage> { CalendarController _calendarController; bool _isExpanded; @override void initState() { super.initState(); _calendarController = CalendarController(); _isExpanded = false; } @override void dispose() { _calendarController.dispose(); super.dispose(); } void toggleExpanded() { setState(() { _isExpanded = !_isExpanded; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Calendar'), ), body: Column( children: [ TableCalendar( calendarController: _calendarController, initialCalendarFormat: CalendarFormat.week, formatAnimation: FormatAnimation.slide, startingDayOfWeek: StartingDayOfWeek.sunday, availableGestures: AvailableGestures.all, availableCalendarFormats: const { CalendarFormat.week: 'Week', CalendarFormat.month: 'Month', }, calendarStyle: CalendarStyle( todayColor: Colors.blue, selectedColor: Theme.of(context).primaryColor, todayStyle: TextStyle( fontWeight: FontWeight.bold, fontSize: 18.0, color: Colors.white, ), ), headerStyle: HeaderStyle( centerHeaderTitle: true, formatButtonVisible: false, ), onHeaderTapped: (date) { toggleExpanded(); }, ), if (_isExpanded) Container( height: 200, // 调整展开的高度 child: Center( child: Text('Expanded Content'), ), ), ], ), ); } } ``` 在此示例,我们通过`_isExpanded`布尔值来控制展开收起状态。当用户点击标题栏,`onHeaderTapped`回调函数会触发,然后我们调用`toggleExpanded`函数来切换状态。根据`_isExpanded`的值,我们在日历下方添加了一个高度为200的容器,并在其显示"Expanded Content"文本。 您可以根据您的需求调整展开的高度以及展开的内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值