单击创建按钮时在应用程序中创建一个按钮

Question

晚上好，

我想知道是否可以在应用程序中放置一个创建按钮，当用户单击它时，它应该在其旁边创建一个按钮，用作存储类别。

提前致谢

创建一个按钮但不可能。

Answer 1

问题解释不够，但据我了解：

首先您需要将按钮存储在

list

List<Widget> buttons = <Widget>[];

创建您想要创建的按钮小部件，例如：

class CreatedButtonWidget extends StatelessWidget {
  const CreatedButtonWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(10),
      child: MaterialButton(
        onPressed: () {},
        color: Colors.orange,
        child: const Text("Button"),
      ),
    );
  }
}

然后将添加新按钮的小部件是

ListView.builder

，因为您可以使用按钮列表：

ListView.builder(
  itemCount: buttons.length,
  scrollDirection: Axis.horizontal,
  itemBuilder: (context, index) {
    return buttons[index];
   },
 ),

然后创建将新小部件添加到 UI 的方法：

void _createNewButton() {
    setState(
      () {
        buttons.add(
          const CreatedButtonWidget(),
        );
      },
    );
  }

最后创建一个静态按钮，当用户按下它时，它将创建新按钮：

MaterialButton(
  onPressed: () {
    _createNewButton();
  },
  color: Colors.cyan,
  shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(15),
   ),
   child: const Text("Create Button"),
 ),

完整代码：

ass CreateButtonWidget extends StatefulWidget {
  const CreateButtonWidget({super.key});

  @override
  State<CreateButtonWidget> createState() => _CreateButtonWidgetState();
}

class _CreateButtonWidgetState extends State<CreateButtonWidget> {
  List<Widget> buttons = <Widget>[];

  void _createNewButton() {
    setState(
      () {
        buttons.add(
          const CreatedButtonWidget(),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Button generator"),
        backgroundColor: Colors.cyan[200],
      ),
      body: Column(
        children: <Widget>[
          Row(
            children: [
              buttons.isEmpty
                  ? const Text("No Buttons yet")
                  : Expanded(
                      child: SizedBox(
                        height: context.screenHeight * .08,
                        child: ListView.builder(
                          itemCount: buttons.length,
                          scrollDirection: Axis.horizontal,
                          itemBuilder: (context, index) {
                            return buttons[index];
                          },
                        ),
                      ),
                    ),
            ],
          ),
          Center(
            child: MaterialButton(
              onPressed: () {
                _createNewButton();
              },
              color: Colors.cyan,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15),
              ),
              child: const Text("Create Button"),
            ),
          )
        ],
      ),
    );
  }
}

class CreatedButtonWidget extends StatelessWidget {
  const CreatedButtonWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(10),
      child: MaterialButton(
        onPressed: () {},
        color: Colors.orange,
        child: const Text("Button "),
      ),
    );
  }
}

希望对您有帮助！！