Flutter:- 如何在屏幕上显示动态小部件？

Question

我想以加扰的形式显示输入的文本。 即单词的每个字母需要在单独的Container中连续显示。 为此，我接受文本输入，将其存储在List<String>中，然后使用shuffle()对其进行加扰，然后使用List.generate返回带有Text的Container ，如下所示：

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 中，如下所示？

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

Answer 1

这是我的解决方案：

1）按一个按钮，将字符串刮掉并将其设置为列表

2) setState 并向用户显示列表

这是小部件代码：

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，因为在没有可用空间时自动包装小部件。 你可以使用任何你喜欢使用的东西。

这是屏幕结果：

按下按钮前：

按下按钮后：

Answer 2

请检查它的以下解决方案，我已经使用了 Wrap 小部件

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutterlearningapp/colors.dart';

class HomeScreen extends StatefulWidget {
  var inputVales;

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  List<String> charcaterArray = new List<String>();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text("Home"),
        ),
        body: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(10.0),
              child: TextField(
                decoration: InputDecoration(labelText: 'Enter Words'),
                onChanged: (text) {
                  setState(() {
                    widget.inputVales = text;
                    charcaterArray.clear();
                    for (var i = 0; i < widget.inputVales.length; i++) {
                      var character = widget.inputVales[i];
                      if (character != " ") {
                        charcaterArray.add(character);
                      }
                    }
                  });
                },
              ),
            ),
            Wrap(
              spacing: 6.0,
              runSpacing: 6.0,
              children:
                  List<Widget>.generate(charcaterArray.length, (int index) {
                return Container(
                  height: MediaQuery.of(context).size.height * 0.1,
                  width: MediaQuery.of(context).size.width * 0.1,
                  decoration: BoxDecoration(
                    color: Colors.lightGreen,
                    borderRadius: BorderRadius.all(Radius.elliptical(4.0, 4.0)),
                  ),
                  child: Center(
                    child: Text(
                      charcaterArray[index],
                      style:
                          TextStyle(color: Colors.deepOrange, fontSize: 20.0),
                    ),
                  ),
                );

                /*Chip(
                  label: Text(charcaterArray[index]),
                  onDeleted: () {
                    setState(() {
                      charcaterArray.removeAt(index);
                    });
                  },
                );*/
              }),
            )
          ],
        ));
  }
}

这是它的output