单击时添加相同的 Widget -Flutter

Question

我很难做到。当我单击按钮时，我希望它出现在底部并带有删除选项。带有 multi_select_chip 的选项不适用于 SDK 2.12 版，谁能告诉我该怎么做？

添加按钮是个好主意吗？如果创建一个新的小部件，它将与我刚刚单击的按钮中的数据相结合，会是什么样子？

我是 Flutter 新手，任何帮助都会非常有用。

 class Demo extends StatefulWidget {
 @override
 _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
List<Widget> widgets = <Widget>[];

@override
 Widget build(BuildContext context) {
return Center(
  child: Column(
    children: widgets,
  ),
);
}

  Widget show() {
   return Center(
     child: Column(
    children: widgets,
    ),
    );
  }

 @override
void initState() {
widgets = <Widget>[
  // Text(
  //   "This is a sample text",
  //   style: TextStyle(fontSize: 40),
  // ),
       Container(
       padding: EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Wrap(
              spacing: 8.0,
              // line interval
              runSpacing: 8.0,
              children: <Widget>[
                ConstrainedBox(
                  constraints:
                      const BoxConstraints.tightFor(width: 70, height: 35),
                  child: ElevatedButton(
                      child: Text(
                        'Lion',
                        style: TextStyle(fontSize: 13),
                      ),
                      onPressed: () {
                        debugPrint("clicked");
                        debugPrint('widgets: $widgets');
                        widgets.insert(1, SampleContainer());
                        setState(() {});
                      },
                      style: ElevatedButton.styleFrom(
                          primary: purple, elevation: 10)),
                ),
                const SizedBox(width: 8.0),
                ConstrainedBox(
                  constraints:
                      const BoxConstraints.tightFor(width: 125, height: 35),
                  child: ElevatedButton(
                      child: Text(
                        'Flamingo',
                        style: TextStyle(fontSize: 13),
                      ),
                      onPressed: () {
                        debugPrint("clicked");
                        debugPrint('widgets: $widgets');
                        widgets.insert(1, SampleContainer());
                        setState(() {});
                      },
                      style: ElevatedButton.styleFrom(
                          primary: purple, elevation: 10)),
                ),
                const SizedBox(width: 8.0),
                ConstrainedBox(
                  constraints:
                      const BoxConstraints.tightFor(width: 105, height: 35),
                  child: ElevatedButton(
                      child: Text(
                        'Hippo',
                        style: TextStyle(fontSize: 13),
                      ),
                      onPressed: () {
                        debugPrint("clicked");
                        debugPrint('widgets: $widgets');
                        widgets.insert(1, SampleContainer());
                        setState(() {});
                      },
                      style: ElevatedButton.styleFrom(
                          primary: purple, elevation: 10)),
                ),
                // ]),
                // const SizedBox(width: 80.0),
                // Row(children: <Widget>[
                //   const SizedBox(width: 40.0),
                ConstrainedBox(
                  constraints:
                      const BoxConstraints.tightFor(width: 100, height: 35),
                  child: ElevatedButton(
                      child:
                          Text("Horse", style: TextStyle(fontSize: 13)),
                      onPressed: () {
                        debugPrint("clicked");
                        debugPrint('widgets: $widgets');
                        widgets.insert(1, SampleContainer());
                        setState(() {});
                      },
                      style: ElevatedButton.styleFrom(
                          primary: purple, elevation: 10)),
                ),
                const SizedBox(width: 8.0),
                ConstrainedBox(
                  constraints:
                      const BoxConstraints.tightFor(width: 135, height: 35),
                  child: ElevatedButton(
                      child: Text("Tiger",
                          style: TextStyle(fontSize: 13)),
                      onPressed: () {
                        debugPrint("clicked");
                        debugPrint('widgets: $widgets');
                        widgets.insert(1, SampleContainer());
                        setState(() {});
                      },
                      style: ElevatedButton.styleFrom(
                          primary: purple, elevation: 10)),
                ),
                const SizedBox(width: 4.0),
                ConstrainedBox(
                  constraints:
                      const BoxConstraints.tightFor(width: 70, height: 35),
                  child: ElevatedButton(
                      child: Text("INNE", style: TextStyle(fontSize: 13)),
                      onPressed: () {
                        debugPrint("clicked");
                        debugPrint('widgets: $widgets');
                        widgets.insert(1, SampleContainer());
                        setState(() {});
                      },
                      style: ElevatedButton.styleFrom(
                          primary: purple, elevation: 10)),
                ),
              ]),
        ]),
  ),
];
 }

 // Widget show() {
  //   return SampleContainer();
  // }

   }

      class SampleContainer extends StatefulWidget {
   @override
 _SampleContainerState createState() => _SampleContainerState();
}.  

  class _SampleContainerState extends State<SampleContainer> {
  @override
 Widget build(BuildContext context) {
return Container(
  padding: EdgeInsets.all(16.0),
  child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Wrap(
            spacing: 8.0,
            // line interval
            runSpacing: 8.0,
            children: <Widget>[
    const SizedBox(width: 40.0),
    ElevatedButton(
      child: Text("INNE"),
      onPressed: () {
        setState(() {});
      },
        )
      ]),
 ] ),);
}
}

Answer 1

这是一个例子。

import 'package:flutter/material.dart';

class WidgetPicker extends StatefulWidget {
  const WidgetPicker({Key key}) : super(key: key);

  @override
  _WidgetPickerState createState() => _WidgetPickerState();
}

class _WidgetPickerState extends State<WidgetPicker> {
  List<String> values = [
    'Hello',
    'Hello2',
    'Hello3',
  ];

  List<String> pickedValues = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _buildValues(),
          const SizedBox(
            height: 30,
          ),
          _buildPickeds(),
        ],
      ),
    );
  }

  Widget _buildValues() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: values
          .map(
            (value) => GestureDetector(
              onTap: () {
                if (pickedValues.contains(value)) {
                  pickedValues.remove(value);
                } else {
                  pickedValues.add(value);
                }
                setState(() {});
              },
              child: Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                  vertical: 10,
                ),
                color: Colors.blueGrey,
                child: Text(
                  value,
                ),
              ),
            ),
          )
          .toList(),
    );
  }

  Widget _buildPickeds() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: pickedValues
          .map(
            (value) => GestureDetector(
              onTap: () {
                if (pickedValues.contains(value)) {
                  pickedValues.remove(value);
                } else {
                  pickedValues.add(value);
                }
                setState(() {});
              },
              child: Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                  vertical: 10,
                ),
                color: Colors.red,
                child: Text(
                  value,
                ),
              ),
            ),
          )
          .toList(),
    );
  }
}