Flutter：如何根据图像的X Y百分比位置插入图标/动作 [英] Flutter: How to insert Icon/Action based on X Y percent position of image
问题描述
我要基于图像的XY百分比位置插入图标/操作，如下所示：
I want to insert a Icon/Action based on X Y percent position of image as follows:
这是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"
}
]
我想在单击 TogglesButton 天空 =>从Json获取数据：
I want that when click on the TogglesButton "Sky" => get data from Json:
-
获取值 seasonName = Spring （因为
TabBar被选择为
作为春季）
Get values seasonName = "Spring" (because
TabBaris being selected as "Spring")
获取满足（1）且具有 isDaySelected = true的值； （因为 TogglesButton isDaySelected 被选择为true）
Get values that satisfy (1) and have isDaySelected = "true" (because the TogglesButton isDaySelected is being selected as true)
获取满足（1）和（2）且 listButton = Sky
Get values that satisfy (1) and (2) and listButton = "Sky"
的值在基于XY百分比的图像上显示满足（1）（2）（3）的 pointName 值。例如：
Show the pointName values that satisfy (1) (2) (3) on image based on X Y percent. Ex:
-
pointName： Bird => pointXPercent = 66.0， pointYPercent = 12.0
pointName: "Bird" => pointXPercent = 66.0, pointYPercent = 12.0
pointName： Cloud => pointXPercent = 53.6， pointYPercent = 27.4
pointName: "Cloud" => 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), ]), ) ])))); } }
推荐答案
有几种方法可获得结果
使用堆栈并将其包装在IntrinsicHeight中以将其设置为图像高度
Use Stack and wrap it in IntrinsicHeight to set it height as you image height
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'), ), ], ), ), ], ),其大小将堆栈儿童最大高度，直到加载网络图像为止（f从头到尾都知道它的大小），它会很高，就像鸟或云的高度最大。
This will be sized to Stack children max height and until network image loaded(finally you know size) it will be tall as max of bird or cloud heigh
请注意，
IntrinsicHeight相对昂贵。对于更复杂的情况，可以使用LayoutBuilder
For more complex cases you can use LayoutBuilder
body: Column( children: <Widget>[ Expanded( child: LayoutBuilder( builder: (context, constraints) { return Stack( children: <Widget>[ Positioned( top: .12 * constraints.biggest.height, left: .66 * constraints.biggest.width, child: Text('bird'), ), Positioned( top: .274 * constraints.biggest.height, left: .536 * constraints.biggest.width, child: Text('cloud'), ), ], ); }, ), ), ], ),PS在这里，我们通过鸟和云的顶部和顶部
进行布局通过birs& cloud的中心-您必须知道它们的大小并进行更多的数学运算PS Here we laying out by left&top of our bird&cloud If you need to layout by center of birs&cloud - you have to know their sizes and do a little bit more math
这篇关于Flutter：如何根据图像的X Y百分比位置插入图标/动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
