Question

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

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中显示上述方法的结果。我应该如何使用此方法，以便基于Container返回的shuffleList.length将在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);
                    });
                  },
                );*/
              }),
            )
          ],
        ));
  }
}

这是它的输出

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

2 个答案: