位于堆栈中的负Y偏移的压力机上的Flutter问题

qfe3c7zg  于 2023-10-22  发布在  Flutter
关注(0)|答案(2)|浏览(147)

我有两个小部件在一个堆栈中。这在下面演示。

第二个控件是一个按钮,它位于一个Y轴为负的定位控件中。
问题是溢出是不可点击的。我有什么办法来解决这个问题吗?

  1. Stack(
  2. fit: StackFit.expand,
  3. overflow: Overflow.visible,
  4. clipBehavior: Clip.none,
  5. alignment: AlignmentDirectional.topCenter,
  6. children: [
  7. ClipRRect(
  8. borderRadius: BorderRadius.all(Radius.circular(29)),
  9. child: ClipPath(
  10. clipper: NavbarClipper(),
  11. child: Container(
  12. color: Colors.white,
  13. ),
  14. ),
  15. ),
  16. Positioned(
  17. top: -30,
  18. child: Container(
  19. width: context.dynamicHeight(0.16),
  20. height: context.dynamicWidth(0.16),
  21. child: FittedBox(
  22. child: FloatingActionButton(
  23. onPressed: () {},
  24. backgroundColor: Colors.orange,
  25. child: Icon(Icons.ac_unit),
  26. ),
  27. ),
  28. ),
  29. )
  30. ],
  31. )

谢谢.

txu3uszq

txu3uszq1#

你可以用填充代替负边距来 Package 矩形按钮

  1. class MyHomePage extends StatefulWidget {
  2. MyHomePage();
  3. @override
  4. _MyHomePageState createState() => _MyHomePageState();
  5. }
  6. class _MyHomePageState extends State<MyHomePage> {
  7. Color color = Colors.orange;
  8. @override
  9. Widget build(BuildContext context) {
  10. return Scaffold(
  11. body: Container(
  12. height: 200,
  13. padding: EdgeInsets.all(32),
  14. child: Stack(
  15. fit: StackFit.expand,
  16. clipBehavior: Clip.none,
  17. alignment: AlignmentDirectional.topCenter,
  18. children: [
  19. Padding(
  20. padding: EdgeInsets.only(top: 30),
  21. child: ClipRRect(
  22. borderRadius: BorderRadius.all(Radius.circular(20)),
  23. child: ClipRRect(
  24. child: Container(
  25. color: Colors.blue,
  26. )
  27. ),
  28. ),
  29. ),
  30. Positioned(
  31. top: 0,
  32. child: Container(
  33. width: 50,
  34. height: 50,
  35. child: FittedBox(
  36. child: FloatingActionButton(
  37. onPressed: () {
  38. setState((){
  39. color = (color == Colors.red) ? Colors.orange : Colors.red;
  40. });
  41. },
  42. backgroundColor: color,
  43. child: Icon(Icons.ac_unit),
  44. ),
  45. ),
  46. ),
  47. )
  48. ],
  49. ),
  50. ),
  51. );
  52. }
  53. }
展开查看全部
hmtdttj4

hmtdttj42#

下面是solution,使用列而不是堆栈,并使用带有一些偏移量transform.translate

相关问题