我正在做一个Flutter项目，我想在图像中添加一个图标按钮，但这个图标必须位于相同的位置。 例如，如果我加载汽车图像和汽车图像，我想在汽车车轮上添加一个图标按钮。现在我已经完成了定位小部件。但我认为这不是正确的方法，因为如果设备屏幕是，并且如果使用具有更大或更小屏幕的设备，则此图标按钮将位于不同的位置。 那么我应该做什么才能找到正确的方法。 感谢您的回答。 代码：
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';
import 'package:material_symbols_icons/symbols.dart';
class VehicleDetailScreen extends StatefulWidget {
final String selectedCountry;
final String selectedType;
final String selectedVechicle;
final String imageUrl;
const VehicleDetailScreen({
super.key,
required this.selectedVechicle,
required this.imageUrl,
required this.selectedCountry,
required this.selectedType,
});
@override
State<VehicleDetailScreen> createState() => _VehicleDetailScreenState();
}
class _VehicleDetailScreenState extends State<VehicleDetailScreen> {
late DatabaseReference _vehiclesRef;
int _checkedButtonIndex = -1;
@override
void initState() {
super.initState();
_vehiclesRef = FirebaseDatabase.instance.ref(
'Countries/${widget.selectedCountry}/Types/${widget.selectedType}/Vechicles/${widget.selectedVechicle}');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.selectedVechicle),
),
body: StreamBuilder(
stream: _vehiclesRef.onValue,
builder: (context, snapshot) {
if (snapshot.hasData) {
var imageUrl =
snapshot.data?.snapshot.child('image').value?.toString() ?? '';
var weight =
snapshot.data?.snapshot.child('weight').value?.toString() ?? '';
var crew =
snapshot.data?.snapshot.child('crew').value?.toString() ?? '';
var armor =
snapshot.data?.snapshot.child('armor').value?.toString() ?? '';
var weapons =
snapshot.data?.snapshot.child('weapons').value?.toString() ??
'';
var speed =
snapshot.data?.snapshot.child('speed').value?.toString() ?? '';
var pos1X = double.tryParse(
snapshot.data?.snapshot.child('pos1X').value?.toString() ??
'') ??
0.0;
var pos1Y = double.tryParse(
snapshot.data?.snapshot.child('pos1Y').value?.toString() ??
'') ??
0.0;
var pos2X = double.tryParse(
snapshot.data?.snapshot.child('pos2X').value?.toString() ??
'') ??
0.0;
var pos2Y = double.tryParse(
snapshot.data?.snapshot.child('pos2Y').value?.toString() ??
'') ??
0.0;
var pos3X = double.tryParse(
snapshot.data?.snapshot.child('pos3X').value?.toString() ??
'') ??
0.0;
var pos3Y = double.tryParse(
snapshot.data?.snapshot.child('pos3Y').value?.toString() ??
'') ??
0.0;
return Column(
children: [
Stack(
children: [
if (imageUrl.isNotEmpty)
SizedBox(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.5,
child: Image.network(
imageUrl,
fit: BoxFit.cover,
),
),
const Padding(
padding: EdgeInsets.only(
bottom: 15,
),
),
Positioned(
left: pos1X,
top: pos1Y,
child: GestureDetector(
onTap: () {
setState(() {
_checkedButtonIndex = 0;
});
},
child: IconButton(
icon: Icon(
_checkedButtonIndex == 0
? Icons.radio_button_checked
: Icons.radio_button_unchecked,
),
color: _checkedButtonIndex == 0
? Colors.red
: Colors.black,
iconSize: 30,
onPressed: () {},
),
),
),
Positioned(
left: pos2X,
top: pos2Y,
child: GestureDetector(
onTap: () {
setState(() {
_checkedButtonIndex = 1;
});
},
child: IconButton(
icon: Icon(
_checkedButtonIndex == 1
? Icons.radio_button_checked
: Icons.radio_button_unchecked,
),
color: _checkedButtonIndex == 1
? Colors.red
: Colors.black,
iconSize: 30,
onPressed: () {},
),
),
),
Positioned(
left: pos3X,
top: pos3Y,
child: GestureDetector(
onTap: () {
setState(() {
_checkedButtonIndex = 2;
});
},
child: IconButton(
icon: Icon(
_checkedButtonIndex == 2
? Icons.radio_button_checked
: Icons.radio_button_unchecked,
),
color: _checkedButtonIndex == 2
? Colors.red
: Colors.black,
iconSize: 30,
onPressed: () {},
),
),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.all(
5,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.all(5),
),
Row(
children: [
const Icon(
Symbols.weight,
size: 50,
),
const Padding(
padding: EdgeInsets.only(right: 20),
),
Text(weight)
],
),
Row(
children: [
const Icon(
Symbols.groups,
size: 50,
),
const Padding(
padding: EdgeInsets.only(right: 20),
),
Text(crew)
],
),
Row(
children: [
const Icon(
Symbols.shield,
size: 50,
),
const Padding(
padding: EdgeInsets.only(right: 20),
),
Text(
armor.replaceAll('\\n', '\n'),
),
],
),
Row(
children: [
const Icon(
Symbols.point_scan,
size: 50,
),
const Padding(
padding: EdgeInsets.only(right: 20),
),
Text(
weapons.replaceAll('\\n', '\n'),
),
],
),
Row(
children: [
const Icon(
Symbols.speed,
size: 50,
),
const Padding(
padding: EdgeInsets.only(right: 20),
),
Text(
speed.replaceAll('\\n', '\n'),
),
],
),
],
),
const Text('data'),
],
),
],
);
} else if (snapshot.hasError) {
return const Center(child: Text("Error loading data."));
} else {
return const Center(child: CircularProgressIndicator());
}
},
),
);
}
}
问题是您正在使用位置小部件的动态值。 将确切位置设置为
rightlefttop:10,left:10,