Flutter:-如何在屏幕上显示动态小部件? [英] Flutter :- How to display dynamic widgets on screen?

问题描述

我想以加扰的形式显示输入的文本.也就是说，单词的每个字母都需要连续显示在单独的Container中.为此，我要输入文本，将其存储在List<String>中，然后使用shuffle()对其进行加扰，然后使用List.generate将Container与Text一起返回，如下所示:

I want to show entered text in scrambled form. ie, each letter of the word need to display in individual Container in a row. For this, I am taking text input, storing it in List<String> and then scrambling it using shuffle() and then using List.generate to return Container with Text, as below:

List<Widget> _generateJumble(String input) {
  inputList = input.split('');
  var shuffleList = inputList.toList()..shuffle();
  print(shuffleList);
  return List<Widget>.generate(shuffleList.length, (int index) {
    return Container(
      width: 50,
      color: Colors.blue,
      child: Text(shuffleList[index].toString(),
        style: TextStyle(color: Colors.white),
      )
    );
  });
}

我正在调用上面的方法onTap的按钮，应该在其上显示加扰的输入形式.但是我不确定如何在UI中显示上述方法的结果.我应该如何使用此方法，以便基于shuffleList.length返回的Container将显示在UI中，如下所示?

I am calling above method onTap of a button upon which the scrambled form of the input should be displayed. But I am not sure how to display the result of above method in UI. How should I use this method so that the returning Container based on shuffleList.length will be displayed in UI as below ?

RaisedButton(
  onPressed: () {},
  child: Text('Clear'),
    )
  ],
  ),
),
Row(
  children: <Widget>[
    //  ?  _displayJumble()
  ]
)

推荐答案

这是我的解决方案:

1)按下按钮，将字符串加粗并将其设置为列表

1) Press a button, scrable the string and set it to the a list

2)setState并向用户显示列表

2) setState and show the list to the user

这是小部件代码:

class _MyHomePageState extends State<MyHomePage> {
  List<String> inputList = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Wrap(
        children:  inputList.map((s) {
          return Container(
            width: 50,
            color: Colors.blue,
            child: Text(
              s,
              style: TextStyle(color: Colors.white),
            ),
          );
        }).toList(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _generateJumble('Random string');
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  List<Widget> _generateJumble(String input) {
    inputList = input.split('');
    inputList = inputList.toList()..shuffle();
    print(inputList);
  }
}

我使用了小部件Wrap，因为在没有可用空间时会自动包装小部件.您可以使用任何喜欢的方式.

I used the widget Wrap because automatically wrap the widget when there is no space available for it. You can use whatever you like to use.

这是屏幕结果:

在按下按钮之前:

按下按钮后:

这篇关于Flutter:-如何在屏幕上显示动态小部件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！