flutter 与堆栈中较低的小部件交互

roejwanj  于 2023-04-13  发布在  Flutter
关注(0)|答案(1)|浏览(92)

我有一个Stack,它有一个GoogleMap和一个重叠的SingleChildScrollView,其中填充了Widgets。
然而,SCSV现在阻止Map,我不能与它交互?我试图做的是,是一个Map作为“上”部件在页面上,然后滚动视图可以滚动在Map上。

Stack(children: <Widget>[
          Container(
              height: 400,
              child: GoogleMap(
                onMapCreated: _onMapCreated,
                initialCameraPosition:
                    CameraPosition(target: _center, zoom: 13.0),
              )),
          SingleChildScrollView(
              child: Padding(
                  padding: EdgeInsets.fromLTRB(0, 300, 0, 0),
                  child: Container(
                      decoration: BoxDecoration(color: Colors.white),
                      child: Column(children: _offers))))
        ])

有什么想法可以让我做到这一点吗?除了我现有的布局之外,其他的建议是非常欢迎的,只要结果是一样的:)

6ju8rftf

6ju8rftf1#

看来你遇到了一个类似的问题,我在我的应用程序中解决了这个问题。我有两个交互式小部件堆叠在彼此的照片预览中,这是平移和绘制小部件。我想让用户能够在两个小部件的交互之间切换。因为两个小部件都是全屏的,我需要让“顶部”小部件对用户的点击透明,取决于一个布尔标志(在我的例子中,panEnable)。为了解决这个问题,我使用了IgnorePointer小部件:

class PhotoPreviewScreen extends StatefulWidget {
  _PhotoPreviewScreen createState() => _PhotoPreviewScreen();
}

class _PhotoPreviewScreen extends State<PhotoPreviewScreen>  {
  bool  panEnable = true; // THAT IS THE enable/disable flag
  final String imagePath = 'my_image.jpg'; // image to show and interact with

  @override
  Widget build(BuildContext context) {     
      return Scaffold(
          body: Stack(
            children: [
                InteractiveViewer( // This is the "lower widget"
                  panEnabled: panEnable, // THAT IS THE enable/disable flag
                  scaleEnabled: panEnable,  // THAT IS THE enable/disable flag
                  boundaryMargin: EdgeInsets.all(double.infinity), 
                  minScale: 1,
                  maxScale: 16,
                  child: Image.file(
                    File(imagePath), // imagePath — local path to an image in Preview
                  ),
                ),
                Center(
                  child: Stack(
                    children: <Widget>[
                           IgnorePointer(
                             ignoring: panEnable,  // THAT IS THE enable/disable flag
                             child:
                                 SomeFullScreenActionWidget( // AN UPPER ACTION
                                   onPressed: () => <SOME ACTION>,
                                   ), // SomeFullScreenActionWidget
                             ), //  IgnorePointer
                           // <here might be some "passive" widgets that are not use pointers
                          ], // children of Stack widget
                 ), // Stack
                ), // Center
                IconButton( // wrap it in Align/Positioned or any other widget to arrange the widgets switch button on the screen
                  iconSize: 33.0,
                  color: Colors.white,
                  icon: Icon(!panEnable? CupertinoIcons.pencil_outline:   CupertinoIcons.pencil_slash), // I use some stylish icons, you may choose standard
                  onPressed: () {
                    setState(() {
                      panEnable = !panEnable; // HERE IS THE SWITCH enable/disable flag
                      }); // SetState
                    }, // onPressed
                  ), // IconButton
               ], // children of Stack
              ),  // Stack
             ); // Scaffold

需要注意的是,我使用了StatefulWidget类来利用setState()。如果使用StatelessWidget类,它将无法正常工作。

相关问题