Flutter Widget逐行显示文本?

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

Flutter中是否有一个小部件,可在每次按此小部件时逐行显示子级文本小部件?这应类似于每次单击Powerpoint演示文稿中的项目符号行。

flutter presentation bulletedlist
1个回答
0
投票

我刚刚进行了测试,并且可以正常工作,可能我没有涵盖某些极端情况,但是工作量不大……]

//I would call it TIM like VIM :P
class TextIMproved extends StatefulWidget {
  final String _longString;
  final int _numberOfWordsPerRow;

  TextIMproved(this._numberOfWordsPerRow, this._longString);

  @override
  _TextIMprovedState createState() => _TextIMprovedState(_numberOfWordsPerRow, _longString);
}

class _TextIMprovedState extends State<TextIMproved> {
  final String longString;
  List<String> listString;
  int _numberOfWordsPerRow;
  String strPopulated;
  String strToDisplay='';

  _TextIMprovedState(this._numberOfWordsPerRow, this.longString);

  @override
  void initState() {
    super.initState();
    listString = longString.split(' ');
    splitString();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
        child: Text(strToDisplay, maxLines: longString.length ~/ _numberOfWordsPerRow + _numberOfWordsPerRow,),
      ),
      onTap: splitString,
    );
  }

  void splitString() {

    //1.prepare empty string
    strPopulated = '';

    //2.populate string
    int len = listString.length <_numberOfWordsPerRow ? listString.length : _numberOfWordsPerRow;
    for (int i = 0; i < len; i++) {
      strPopulated += listString[i] + ' ';
    }

    //3. display portion of string
    setState(() {
      strToDisplay += strPopulated;
    });

    //4.remove displayed text
    List<String> listToremove = strPopulated.split(' ');
    for (String str in listToremove) {
      listString.remove(str);
    }
  }
}

编辑:

您可以在此小部件中添加动画...

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