如何在文本中包含小部件？

Question

我正在创建一个小部件，并希望在Flutter中的文本字符串之间有一个下拉菜单。如何实现类似Flutter中的图像显示的效果？

Answer 1

我认为这就是您所需要的。您可以创建自定义窗口小部件，而不必总是编写代码。

class _MyHomePageState extends State<MyHomePage> {

  String selectedItem = 'withdraw';
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Center(
          child: Wrap(
            alignment: WrapAlignment.center,
            crossAxisAlignment: WrapCrossAlignment.center,
            children: <Widget>[
              Text('Enemy troops chose to '),
              DropdownButton<String>(
                value: selectedItem,
                items: [
                  DropdownMenuItem<String>(
                    value: 'withdraw',
                    child: Text('withdraw'),
                  ),
                  DropdownMenuItem<String>(
                    value: 'adverse',
                    child: Text('adverse'),
                  ),
                  DropdownMenuItem<String>(
                    value: 'celebrate',
                    child: Text('celebrate'),
                  ),
                ],
                onChanged: (item) {
                  selectedItem = item;
                  setState(() {});
                },
              ),
              Text(' to their camps, planning a new attack strategy.'),
            ],
          ),
        ),
    );
  }
}

Answer 2

我们可以用文本中的每个空格分割文本字符串。并且每个分割的文本部分都是一个单独的小部件。因此我们可以在另一个小部件之间放置一个下拉小部件。例如：

在问题的示例中，我们应该有13个小部件，其中12个是文本小部件，其中一个是下拉小部件。然后我们可以将所有这些小部件放入包装小部件中，以显示类似此图片的内容。