堆栈小部件的前一个 child 未激活

Question

在一个堆栈小部件中，我有两个容器 children；每个都有一个图标 child。在视图中，第一个容器的 child 有一个播放图标，按下它应该变成暂停图标，第二个容器的 child 有一个主页图标，按下它会变成钱包图标。

播放图标在按下时不会变为暂停图标。我注意到这是因为第一个容器上有另一个小部件，它是第二个容器，它使第一个小部件的内容处于非活动状态。

如何激活它？有什么办法吗？必须有办法。

import 'package:flutter/material.dart';

void main() {
runApp(AllTests());
}

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

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

class _AllTestsState extends State<AllTests> {
IconData home = Icons.home;
IconData play = Icons.play_circle_filled;
onHomePress() {
if (home == Icons.home) {
  home = Icons.account_balance_wallet_rounded;
} else {
  home = Icons.home;
}
}
onPlayPress() {
if (play == Icons.play_circle_filled) {
  play = Icons.pause_circle_filled_rounded;
} else {
  play = Icons.play_circle_filled;
}
}

@override
Widget build(BuildContext context) {
return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Stack(
          overflow: Overflow.visible,
            children: [
          Positioned(
            top: 50,
            child: Container(
              height: 300,
              width: 500,
              color: Colors.pink,
              child:  IconButton(
                icon: Icon(
                  play,
                  size: 80,
                  color: Colors.black,
                ),
                onPressed: () {
                  setState(() {
                    print('hello');
                    onPlayPress();
                  });
                },
              ),
            ),
          ),
          Positioned(

            child: Padding(
              padding: const EdgeInsets.only(left: 40.0),
              child: Container(
                height: 100,
                width: 100,
                color: Colors.yellow,
                child:  IconButton(
                  icon: Icon(
                    home,
                    size: 80,
                    color: Colors.black,
                  ),
                  onPressed: () {
                    setState(() {
                      onHomePress();
                    });
                  },
                ),
              ),
            ),
          )
        ]),
      ],
    ),
  ),
);
}
}

Answer 1

使用 Stack 时请提供其大小。在列中，您可以使用 SizedBox 进行包装。在 Widget 树上，UI 优先级是从下到上，当您的可点击小部件超过大部件时，最后放置在堆栈子项上。

这是您的小部件。



void main() {
  runApp(AllTests());
}

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

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

class _AllTestsState extends State<AllTests> {
  IconData home = Icons.home;
  IconData play = Icons.play_circle_filled;
  onHomePress() {
    if (home == Icons.home) {
      home = Icons.account_balance_wallet_rounded;
    } else {
      home = Icons.home;
    }
  }

  onPlayPress() {
    if (play == Icons.play_circle_filled) {
      play = Icons.pause_circle_filled_rounded;
    } else {
      play = Icons.play_circle_filled;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              height: 100 + 300 + 40,

              /// total height F
              child: Stack(
                children: [
                  Positioned(
                    top: 50,
                    child: Container(
                      height: 300,
                      width: 500,
                      color: Colors.pink,
                      child: IconButton(
                        icon: Icon(
                          play,
                          size: 80,
                          color: Colors.black,
                        ),
                        onPressed: () {
                          setState(() {
                            print('hello');
                            onPlayPress();
                          });
                        },
                      ),
                    ),
                  ),
                  Positioned(
                    top: 0,
                    child: Padding(
                      padding: const EdgeInsets.only(left: 40.0),
                      child: Container(
                        height: 100,
                        width: 100,
                        color: Colors.yellow,
                        child: IconButton(
                          icon: Icon(
                            home,
                            size: 80,
                            color: Colors.black,
                          ),
                          onPressed: () {
                            setState(() {
                              onHomePress();
                            });
                          },
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

您正在使用 overflow: Overflow.visible，这导致播放按钮即使在 Stack 之外也可见。签出以下解决该问题的代码。

import 'package:flutter/material.dart';

void main() {
  runApp(AllTests());
}

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

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

class _AllTestsState extends State<AllTests> {
  IconData home = Icons.home;
  IconData play = Icons.play_circle_filled;
  onHomePress() {
    if (home == Icons.home) {
      home = Icons.account_balance_wallet_rounded;
    } else {
      home = Icons.home;
    }
  }

  onPlayPress() {
    if (play == Icons.play_circle_filled) {
      play = Icons.pause_circle_filled_rounded;
    } else {
      play = Icons.play_circle_filled;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Spacer(),
            Expanded(
              child: Stack(
//           overflow: Overflow.visible,
                children: [
                  Positioned(
                    top: 50,
                    child: Container(
                      height: 300,
                      width: 500,
                      color: Colors.pink,
                      child: IconButton(
                        icon: Icon(
                          play,
                          size: 80,
                          color: Colors.black,
                        ),
                        onPressed: () {
                          setState(() {
                            print('hello');
                            onPlayPress();
                          });
                        },
                      ),
                    ),
                  ),
                  Positioned(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 40.0),
                      child: Container(
                        height: 100,
                        width: 100,
                        color: Colors.yellow,
                        child: IconButton(
                          icon: Icon(
                            home,
                            size: 80,
                            color: Colors.black,
                          ),
                          onPressed: () {
                            setState(() {
                              onHomePress();
                            });
                          },
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

你也可以看看 AnimatedIcon to use animated play_pause 按钮。

堆栈小部件的前一个 child 未激活

previous child of stack widget not active

widget

flutter