Flutter 颤振：如何根据图像的X Y百分比位置插入图标/动作

我想根据图像的X Y百分比位置插入一个图标/动作，如下所示：

这是Json文件：

[
  {
    "seasonName": "Spring",
    "isDaySelected": true,
    "listButton": "Sky",
    "pointXPercent": 66.0,
    "pointYPercent": 12.0,
    "pointName": "Bird",
    "pointDialog": "this is a bird"
  },
  {
    "seasonName": "Spring",
    "isDaySelected": true,
    "listButton": "Sky",
    "pointXPercent": 53.6,
    "pointYPercent": 27.4,
    "pointName": "Cloud",
    "pointDialog": "this is a cloud"
  },
  {
    "seasonName": "Spring",
    "isDaySelected": true,
    "listButton": "Land",
    "pointXPercent": 38.5,
    "pointYPercent": 78.3,
    "pointName": "Flower",
    "pointDialog": "this is a flower"
  },
  {
    "seasonName": "Spring",
    "isDaySelected": false,
    "listButton": "Land",
    "pointXPercent": 55.3,
    "pointYPercent": 79.8,
    "pointName": "Meadow",
    "pointDialog": "this is a meadow"
  },
  {
    "seasonName": "Summer",
    "isDaySelected": true,
    "listButton": "Sky",
    "pointXPercent": 38.9,
    "pointYPercent": 23.5,
    "pointName": "Sun",
    "pointDialog": "this is the sun"
  }
]

我希望在单击

切换按钮时

“Sky”=>从Json获取数据：

获取值seasonName=“Spring”（因为

TabBar

正在 被选为“弹簧”）

获取满足（1）且具有isDaySelected=“true”的值（因为

切换按钮
isDaySelected被选择为true）

获取满足（1）和（2）以及列表按钮=“天空”的值

基于X Y百分比，在图像上显示满足（1）（2）（3）的点名称值。例：

• 点名称：“Bird”=>pointXPercent=66.0，pointYPercent=12.0

• 点名称：“云”=>pointXPercent=53.6，pointYPercent=27.4

所以请帮助我，这是主文件：

import 'package:ask/model/season_model.dart';
import 'package:ask/services/season_service.dart';
import 'package:flutter/material.dart';

class SeasonPage extends StatefulWidget {
  SeasonPage() : super();
  @override
  _SeasonPageState createState() => _SeasonPageState();
}

class _SeasonPageState extends State<SeasonPage> {
  List<Season> _season = [];
  List<bool> isDaySelected = [true, false];
  List<bool> listButton = [false, false, false];

  final String springDay = 'https://i.imgur.com/MUuCuYI.png';
  final String springNight = 'https://i.imgur.com/QxbAg8Y.png';
  final String summerDay = 'https://i.imgur.com/9Qi6oLm.png';
  final String summerNight = 'https://i.imgur.com/jrFGHvn.png';
  final String autumnDay = 'https://i.imgur.com/yo0RWi6.png';
  final String autumnNight = 'https://i.imgur.com/iPW4r2g.png';
  final String winterDay = 'https://i.imgur.com/CnFDmEJ.png';
  final String winterNight = 'https://i.imgur.com/lFNdvDe.png';

  @override
  void initState() {
    super.initState();
    SeasonServices.getSeason().then((seasons) {
      setState(() {
        _season = seasons;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: DefaultTabController(
            length: 4,
            child: Scaffold(
                appBar: AppBar(
                  title: Text('Season'),
                  bottom: TabBar(tabs: [
                    Tab(child: Text('Spring')),
                    Tab(child: Text('Summer')),
                    Tab(child: Text('Autumn')),
                    Tab(child: Text('Winter')),
                  ]),
                ),
                body: Column(children: [
                  Center(
                      child: ToggleButtons(
                          children: [Text('Day'), Text('Night')],
                          onPressed: (int index) {
                            setState(() {
                              for (int buttonIndex = 0; buttonIndex < isDaySelected.length; buttonIndex++) {
                                if (buttonIndex == index) {
                                  isDaySelected[buttonIndex] = true;
                                } else {
                                  isDaySelected[buttonIndex] = false;
                                }
                              }
                            });
                          },
                          isSelected: isDaySelected)),
                  SizedBox(height: 5),
                  Center(
                      child: ToggleButtons(
                          children: [Text('Sky'), Text('Mountain'), Text('Land')],
                          onPressed: (int index) {
                            setState(() {
                              for (int buttonIndex = 0; buttonIndex < listButton.length; buttonIndex++) {
                                if (buttonIndex == index) {
                                  listButton[buttonIndex] = !listButton[buttonIndex];
                                } else {
                                  listButton[buttonIndex] = false;
                                }
                              }
                            });
                          },
                          isSelected: listButton)),
                  Expanded(
                    child: TabBarView(children: [
                      isDaySelected[0] ? Image.network(springDay) : Image.network(springNight),
                      isDaySelected[0] ? Image.network(summerDay) : Image.network(summerNight),
                      isDaySelected[0] ? Image.network(autumnDay) : Image.network(autumnNight),
                      isDaySelected[0] ? Image.network(winterDay) : Image.network(winterNight),
                    ]),
                  )
                ]))));
  }
}

import'包：ask/model/seasure_model.dart'；
导入“包：ask/services/seasure_service.dart”；
进口“包装：颤振/材料.省道”；
类页面扩展StatefulWidget{
季节页面（）：超级（）；
@凌驾
_季节性页面状态createState（）=>\u季节性页面状态（）；
}
类PageState扩展了状态{
列表_季节=[]；
列表isDaySelected=[true，false]；
List listButton=[false，false，false]；
最后的弦乐春天https://i.imgur.com/MUuCuYI.png';
最后一串春天之夜https://i.imgur.com/QxbAg8Y.png';
最终字符串summerDay=https://i.imgur.com/9Qi6oLm.png';
最后一串夏夜https://i.imgur.com/jrFGHvn.png';
秋日最后一串https://i.imgur.com/yo0RWi6.png';
最后一串秋光https://i.imgur.com/iPW4r2g.png';
最终字符串winterDay=https://i.imgur.com/CnFDmEJ.png';
最后一串冬夜https://i.imgur.com/lFNdvDe.png';
@凌驾
void initState（）{
super.initState（）；
SeasonServices.getSeason（）然后（（seasons）{
设置状态（）{
_季节=季节；
});
});
}
@凌驾
小部件构建（构建上下文）{
返回容器(
子级：DefaultTabController(
长度：4，
孩子：脚手架(
appBar:appBar(
标题：文本（“季节”），
底部：选项卡栏（选项卡：[
选项卡（子项：文本（'Spring'）），
选项卡（子项：文本（'Summer'）），
选项卡（子项：文本（'秋'）），
选项卡（子项：文本（“冬季”），
]),
),
正文：列（子项：[
居中(
子：切换按钮(
子项：[文本（'Day'）、文本（'Night'）]，
onPressed：（int索引）{
设置状态（）{
对于（int buttonIndex=0；buttonIndex

有几种方法可以获得结果

使用堆栈并将其包装在IntrinsicHeight中，将其高度设置为图像高度

      Column(
        children: <Widget>[
          IntrinsicHeight(
            child: Stack(
              children: <Widget>[
                Image.network('https://i.imgur.com/MUuCuYI.png'),
                Align(
                  alignment: Alignment(.66 * 2 - 1, .12 * 2 - 1),
                  child: Text('bird'),
                ),
                Align(
                  alignment: Alignment(.536 * 2 - 1, .274 * 2 - 1),
                  child: Text('cloud'),
                ),
              ],
            ),
          ),
        ],
      ),

PS这里我们在鸟和云的左侧和顶部布局

---

如果您需要按圆心和云的中心布局-您必须知道它们的大小并进行更多的数学运算

您可以使用Align在堆栈中选择如下位置：

Stack(children: [
    child: Align(
        alignment: Alignment(-.40, -.90),
        child: MyPictureWidget()
    ),
]);

更好，因为您不需要获得约束条件。：）<代码>对齐（0，0）将位于中心

---

感谢您让我了解

堆栈

，这是它获取图像的

高度

和

宽度

的方法，而不是

展开

？哇！！！，它真的很有效，非常感谢，只有一件事，那就是如何从JSON调用它，使用

pointXPercent

和

pointyPercent

，我是代码新手，你能帮我吗，或者我应该创建另一篇文章吗？如果刚刚开始，我会推荐-请阅读文档并获得介绍，如果会出现问题，请问它=）是的，但是如何在中对齐而不是在展开中对齐？

Stack(children: [
    child: Align(
        alignment: Alignment(-.40, -.90),
        child: MyPictureWidget()
    ),
]);