颤振:响应高度和宽度

Question

在下面的flutter代码中，我遇到了高度和宽度问题，每个设备上都会出现不同的问题，例如，在下面的代码中，如果我没有设置高度，我会设置一个背景图像，它会出现在半屏幕上，而在每个设备上，这个高度会出现不同。同样在child: Image.asset( object["placeImage"], fit: BoxFit.cover,width: 280,height: 180,)中，我希望图像在所有设备上显示一个尺寸，而不设置特定的高度和宽度。。有没有办法在慌乱中做到这一点？

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hexcolor/hexcolor.dart';
import 'package:localize_and_translate/localize_and_translate.dart';
import 'package:menu_app/About.dart';
import 'package:menu_app/Drinks.dart';
import 'package:flutter/gestures.dart';
class FoodDetailsPage extends StatefulWidget {
final String pageId;
//The string of each meal will be passed when calling this page.
FoodDetailsPage({required this.pageId});
@override
_FoodDetailsPageState createState() => _FoodDetailsPageState();
}
class _FoodDetailsPageState extends State<FoodDetailsPage> {
late Future<List<Widget>> myCreateList;
@override
void initState() {
super.initState();
myCreateList = createList();
//THIS IS NECESSARY TO AVOID THE FUTUREBUILDER FROM FIRING EVERYTIME THE PAGE REBUILDS.
// You can check more at
// https://stackoverflow.com/questions/57793479/flutter-futurebuilder-gets-constantly-called
}
Future<List<Widget>> createList() async {
List<Widget> items = <Widget>[];
String dataString = await rootBundle.loadString(translator.translate(
"assets/${widget.pageId}.json")); //view JSON file depending on pageId
List<dynamic> dataJSON = jsonDecode(dataString);
dataJSON.forEach((object) {
String finalString = "";
List<dynamic> dataList = object["placeItems"];
dataList.forEach((item) {
finalString = finalString + item + " | ";
});
items.add(Padding(
padding: EdgeInsets.all(2.0),
child: Container(
decoration: BoxDecoration(
color: Color.fromRGBO(255, 255, 255, 0.7),
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [
BoxShadow(
color: Colors.black12, spreadRadius: 2.0, blurRadius: 5.0),
]),
margin: EdgeInsets.all(5.0),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[

child: Image.asset(
object["placeImage"], // also here i need to set a astatic height and width on each device
fit: BoxFit.cover,
width: 280,
height: 180,
),
),
SizedBox(
width: 250,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
translator.translate(object["placeName"]),
style: GoogleFonts.elMessiri(
textStyle: TextStyle(
fontSize: 15.0, color: Colors.black54)),
),
// Padding(
//   padding: const EdgeInsets.only(top: 2.0, bottom: 2.0),
//   child: Text(
//     finalString,
//     overflow: TextOverflow.ellipsis,
//     style: TextStyle(
//       fontSize: 12.0,
//       color: Colors.black54,
//     ),
//     maxLines: 1,
//   ),
// ),
Text(
translator.translate(" ${object["minOrder"]} IQD"),
style: TextStyle(fontSize: 12.0, color: Colors.black54),
)
],
),
),
)
],
),
),
));
});
return items;
}
Widget build(BuildContext context) {
// ignore: unused_local_variable
var size = MediaQuery.of(context).size;
var screenHeight = MediaQuery.of(context).size.height;
var screenWidth = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
backgroundColor: HexColor("#242424"),
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
iconSize: 20.0,
onPressed: () {
Navigator.pop(context);
},
),
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/images/logo.png",
fit: BoxFit.contain,
height: 40,
),
],
),
),
body: SafeArea(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min, // set min
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/images/backg.png", // i have to set a static height for each device to get the full backfround 
),
fit: BoxFit.fill)),
height: 3000, 
width: screenWidth,
child: FutureBuilder<List<Widget>>(
initialData: [Text("")],
future: myCreateList,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting)
return Text(translator.translate("Loading"));
if (snapshot.hasError) {
return Text("Error ${snapshot.error}");
}
if (snapshot.hasData) {
return Padding(
padding: EdgeInsets.all(8.0),
child: GridView.count(
childAspectRatio: 1, // items' width/height
crossAxisCount: 2,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: [
// ignore: sdk_version_ui_as_code
...?snapshot.data,
],
));
} else {
return CircularProgressIndicator();
}
}),
)
],
),
)),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => About()),
);
},
backgroundColor: Colors.black,
child: Icon(
MdiIcons.information,
color: Colors.white,
)),
);
}
}

Answer 1

如果您希望在每个设备中的图像大小相同，请使用容器将其包裹起来，并根据需要提供静态高度和宽度，请使用fit属性，但如果您希望图像的大小应根据设备的高度和宽度而变化，则可以使用媒体查询。。。。例如

Container(
color: Colors.yellow,
height: MediaQuery.of(context).size.height * 0.65,
width: MediaQuery.of(context).size.width,
)

将您的图像放入子参数中。。。。。。让我知道这是否有助于