flutter - 如何基于Flutter中的X和Y值在ListView或大型Continter中创建动态容器或平面按钮

Question

我有一个示例json数据

  "MyButtons":[
    {
    "shortName":"Garage",
    "shortDesc":"this is the Garage",
    "PkID":"1",
    "height":50, // this is the button/container size height 
    "width":50, // this is the button size width
    "xAxisPoint":251,
    "yAxisPoint":205
    },
    {
    "shortName":"Dining",
    "shortDesc":"Dining desc",
    "tablePkID":"2",
    "height":50,
    "width":50,
    "xAxisPoint":803,
    "yAxisPoint":33
    },
{
    "shortName":"Bedroom",
    "shortDesc":"Bedroom desc",
    "tablePkID":"2",
    "height":50,
    "width":50,
    "xAxisPoint":803,
    "yAxisPoint":33
    }
    ]

我将知道图像或大外部容器内部的x和y位置，因为我不熟悉该方法，无法弄清楚要使用哪个小部件以及如何根据x和y值动态在容器内插入平面按钮，

当我按黄色按钮时，应该提醒我您已按下车库按钮。
这是上面截图的Dart代码

 return Scaffold(
      appBar: AppBar(
        title: Center(child: Text(widget.title)),
      ),
      body: Padding(
        padding: EdgeInsets.all(2),
        child: ListView(
          shrinkWrap: true,
          children: <Widget>[
            ConstrainedBox(
              constraints: BoxConstraints(
                  maxHeight: (MediaQuery.of(context).size.height - 0),
                  maxWidth: MediaQuery.of(context).size.width),
              child: RotatedBox(
                quarterTurns: 1,
                child: Container(
                    key: _keyRed,
                    child: Container(),
                    padding: const EdgeInsets.all(0),
                    decoration: BoxDecoration(
                        color: Colors.green,
                        image: DecorationImage(
                          image: MemoryImage(base64Decode(kImage2d)),
                          fit: BoxFit.fill,
                        ))),
              ),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Hello world',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

Answer 1

使用一个FlatButton。在定位小部件中使用 FlatButton 。

列表项

Positioned将帮助您相对于父容器放置小部件。

应该在 Stack Widget中使用排名。

理想情况下，堆栈小部件的父级应该是一个容器。

 class MyContainer extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Stack(children: <Widget>[
            Positioned(
              top: 20,
              left: 10,
              child: FlatButton(
                onPressed: () {},
                child: Text("Button 1"),
                color: Colors.yellow,
              ),
            ),
            Positioned(
              top: 250,
              left: 250,
              child: FlatButton(
                onPressed: () {},
                child: Text("Button 2"),
                color: Colors.pink,
              ),
            ),
            Positioned(
              top: 400,
              left: 10,
              child: FlatButton(
                onPressed: () {},
                child: Text("Button 3"),
                color: Colors.purple,
              ),
            )
          ]),
          alignment: Alignment.center,
          color: Colors.green,
          width: double.infinity,
          height: 500,
        );
      }
    }