dart 不同屏幕尺寸的图像上的图标按钮

vfh0ocws  于 2023-09-28  发布在  其他
关注(0)|答案(1)|浏览(106)

我正在做一个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());
          }
        },
      ),
    );
  }
}
pgky5nke

pgky5nke1#

问题是您正在为位置小部件使用动态值。将确切位置设置为rightleft属性(top:10,left:10,)。

相关问题