Question

我有一个Stack，其中包含一个GoogleMap和一个重叠的SingleChildScrollView，其中填充了小部件。

但是，SCSV现在可以阻止地图了，我无法与它互动？我想做的是将地图作为页面上的“上部”小部件，然后将滚动视图滚动到地图上。

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))))
        ])

有什么主意我能做到这一点吗？只要结果是相同的，我现有布局以外的其他建议都值得欢迎：）

Answer 1

我认为您遇到了与我在申请中解决的问题相同的问题。我在我的照片预览中创建了一堆两个交互式小部件——平移/绘图——并希望允许用户在它们之间切换交互。由于它们都是全屏小部件，因此我需要使“顶部”小部件有时对用户的点击透明，这取决于布尔标志（在我的情况下为 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 类，它不起作用。

与Stack中的下部小部件进行交互

1 个答案: