flutter 如何更改Stack中的显示顺序

eh57zj3b 于 2022-11-17 发布在 Flutter

关注(0)|答案(1)|浏览(236)

我需要在点击时随机改变堆栈中按钮的顺序，我该怎么做呢？
下面是一个例子的代码，4个按钮在堆栈中一个接一个，当你点击任何一个时，我想让它们在堆栈中随机改变顺序。
你能告诉我怎么做吗？

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key,}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    

    return Scaffold(
      body: Stack(
      children: [
        Positioned(
        height: 700,
        width: 700,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: () {
              setState(() {
              });
            }, child: Text('1'), 
          ),
         ),
      ),
        Positioned(
        height: 600,
        width: 600,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: () {
              setState(() {
              });
            }, child: Text('2'), 
          ),
         ),
      ),

        Positioned(
        height: 500,
        width: 500,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: () {
              setState(() {
              });
            }, child: Text('3'), 
          ),
         ),
      ),

        Positioned(
        height: 400,
        width: 400,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: () {
              setState(() {
              });
            }, child: Text('4'), 
          ),
         ),
      ),
      ]
    )
  );
  }
}

flutter

来源：https://stackoverflow.com/questions/74464220/how-to-change-the-display-order-in-stack

1条答案

按热度按时间

cfh9epnr1#

将所有按钮放在一个列表中，并将它们作为Stack的子项分配给Stack，当按下任何按钮时，将打乱此列表并重建小部件。

class _TestPageState extends State<TestPage> {
  late List<Widget> children;

  @override
  void initState() {
    super.initState();

    children = [
      Positioned(
        height: 700,
        width: 700,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: onPressed,
            child: Text('1'),
          ),
        ),
      ),
      Positioned(
        height: 600,
        width: 600,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: onPressed,
            child: Text('2'),
          ),
        ),
      ),
      Positioned(
        height: 500,
        width: 500,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: onPressed,
            child: Text('3'),
          ),
        ),
      ),
      Positioned(
        height: 400,
        width: 400,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: onPressed,
            child: Text('4'),
          ),
        ),
      ),
    ];
  }

  void onPressed() {
    setState(() {
      children.shuffle();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: children,
      ),
    );
  }
}

赞(0）回复(0）举报 2022-11-17

我来回答

flutter 如何更改Stack中的显示顺序

1条答案

相关问题

热门标签

最新问答