我正在 Flutter 中制作一个应用程序，但项目不适合屏幕，当我想使用 ListView 时，项目的位置混合在一起，看起来很糟糕，我该如何编辑这些代码？
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
late double screenWidth;
late double screenHeight;
@override
Widget build(BuildContext context) {
screenWidth = MediaQuery.of(context).size.width;
screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(0, 0, 0, 1.0),
Color.fromRGBO(69, 60, 60, 1.0),
],
),
),
child: Stack(
children: [
// Sol üst köşe - Logo
Positioned(
top: screenHeight * 0.04,
left: screenWidth * 0.05,
child: Container(
width: screenWidth * 0.1,
height: screenHeight * 0.1,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/logo.png'), // Logo resminin yolu
fit: BoxFit.cover,
),
),
),
),
// Sağ üst köşe - Arama Butonu
Positioned(
top: screenHeight * 0.05,
right: screenWidth * 0.03,
child: IconButton(
icon: Icon(Icons.search),
color: Colors.white,
iconSize: screenWidth * 0.06,
onPressed: () {
// Arama butonuna tıklandığında yapılacak işlemler
},
),
),
// Alt kenar - Butonlar
Positioned(
top: screenHeight * 0.14,
left: screenWidth * 0.05,
right: screenWidth * 0.4,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child: buildButton("Kitaplar")),
SizedBox(
width: 10.0,
),
Expanded(child: buildButton("Makaleler")),
SizedBox(
width: 10.0,
),
Expanded(child: buildButton("Kategoriler")),
],
),
),
// Resmin üzerindeki butonlar
Center(
child: Stack(
children: [
Container(
width: screenWidth * 0.8,
height: screenHeight * 0.6, // Resmin yüksekliği
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(screenWidth * 0.04),
border:
Border.all(color: Color.fromRGBO(69, 60, 60, 1.0)),
image: DecorationImage(
image:
AssetImage('assets/pics/beyond good and evil.jpg'),
fit: BoxFit.cover,
),
),
),
// Resmin üzerindeki butonlar
Positioned(
bottom: screenHeight * 0.02,
left: screenWidth * 0.10,
child: Container(
height: screenHeight * 0.05,
width: screenWidth * 0.25,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(screenWidth * 0.02),
color: Colors.white),
child: Row(
children: [
IconButton(
icon: Icon(Icons.visibility),
iconSize: screenWidth * 0.04,
color: Colors.black,
onPressed: () {},
),
Text(
'Oku',
style: TextStyle(
color: Colors.black,
fontSize: screenWidth * 0.04),
),
],
),
),
),
SizedBox(
width: 10.0,
),
Positioned(
bottom: screenHeight * 0.02,
left: screenWidth * 0.37,
child: Container(
height: screenHeight * 0.05,
width: screenWidth * 0.33,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(screenWidth * 0.02),
color: Colors.white),
child: Row(
children: [
IconButton(
icon: Icon(Icons.add),
iconSize: screenWidth * 0.05,
color: Colors.black,
onPressed: () {},
),
Text(
'Listem',
style: TextStyle(
color: Colors.black,
fontSize: screenWidth * 0.04),
),
],
),
),
),
],
),
),
// Beyaz kutuların listesi
Positioned(
bottom: screenHeight * 0.2 / 9,
left: screenWidth * 0.05,
right: screenWidth * 0.05,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Yeni Kitaplar:',
style: TextStyle(
color: Colors.white,
fontSize: screenWidth * 0.04,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8.0),
Container(
height: screenHeight * 0.2,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (context, index) {
return Container(
width: screenWidth * 0.20, // Kutu uzunluğu
height: screenHeight * 0.1,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(12.0), // Kutu kalınlığı
),
);
},
),
),
],
),
),
],
),
),
);
}
Widget buildButton(String text) {
return Container(
width: screenWidth * 0.2,
height: screenHeight * 0.04,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(screenWidth * 0.05),
border: Border.all(
color: Colors.white,
),
),
child: Center(
child: Text(
text,
style: TextStyle(
color: Colors.white,
fontSize: screenWidth * 0.020,
),
),
),
);
}
}
void main() {
runApp(
MaterialApp(
home: HomePage(),
),
);
}
我尝试了各种listview方法，我尝试了column但我无法得到任何结果，我想我需要将它从stack标签中删除，但在这种情况下我无法得到我想要的设计。
这就是答案
class HomePage extends StatelessWidget {
late double screenWidth;
late double screenHeight;
@override
Widget build(BuildContext context) {
screenWidth = MediaQuery.of(context).size.width;
screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
body: SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(0, 0, 0, 1.0),
Color.fromRGBO(69, 60, 60, 1.0),
],
),
),
child: Stack(
children: [
// Sol üst köşe - Logo
Positioned(
top: screenHeight * 0.04,
left: screenWidth * 0.05,
child: Container(
width: screenWidth * 0.1,
height: screenHeight * 0.1,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/logo.png'),
fit: BoxFit.cover,
),
),
),
),
// Sağ üst köşe - Arama Butonu
Positioned(
top: screenHeight * 0.05,
right: screenWidth * 0.03,
child: IconButton(
icon: Icon(Icons.search),
color: Colors.white,
iconSize: screenWidth * 0.06,
onPressed: () {
// Arama butonuna tıklandığında yapılacak işlemler
},
),
),
// Alt kenar - Butonlar
Positioned(
top: screenHeight * 0.14,
left: screenWidth * 0.05,
right: screenWidth * 0.4,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child: buildButton("Kitaplar")),
SizedBox(
width: 10.0,
),
Expanded(child: buildButton("Makaleler")),
SizedBox(
width: 10.0,
),
Expanded(child: buildButton("Kategoriler")),
],
),
),
// Resmin üzerindeki butonlar
Center(
child: Stack(
children: [
Container(
width: screenWidth * 0.8,
height: screenHeight * 0.6,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(screenWidth * 0.04),
border: Border.all(
color: Color.fromRGBO(69, 60, 60, 1.0)),
image: DecorationImage(
image: AssetImage(
'assets/pics/beyond good and evil.jpg'),
fit: BoxFit.cover,
),
),
),
// Resmin üzerindeki butonlar
Positioned(
bottom: screenHeight * 0.02,
left: screenWidth * 0.10,
child: Container(
height: screenHeight * 0.05,
width: screenWidth * 0.25,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(screenWidth * 0.02),
color: Colors.white),
child: Row(
children: [
IconButton(
icon: Icon(Icons.visibility),
iconSize: screenWidth * 0.04,
color: Colors.black,
onPressed: () {},
),
Text(
'Oku',
style: TextStyle(
color: Colors.black,
fontSize: screenWidth * 0.04),
),
],
),
),
),
SizedBox(
width: 10.0,
),
Positioned(
bottom: screenHeight * 0.02,
left: screenWidth * 0.37,
child: Container(
height: screenHeight * 0.05,
width: screenWidth * 0.33,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(screenWidth * 0.02),
color: Colors.white),
child: Row(
children: [
IconButton(
icon: Icon(Icons.add),
iconSize: screenWidth * 0.05,
color: Colors.black,
onPressed: () {},
),
Text(
'Listem',
style: TextStyle(
color: Colors.black,
fontSize: screenWidth * 0.04),
),
],
),
),
),
],
),
),
// Beyaz kutuların listesi
Positioned(
bottom: screenHeight * 0.2 / 9,
left: screenWidth * 0.05,
right: screenWidth * 0.05,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Yeni Kitaplar:',
style: TextStyle(
color: Colors.white,
fontSize: screenWidth * 0.04,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8.0),
Container(
height: screenHeight * 0.2,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (context, index) {
return Container(
width: screenWidth * 0.20,
height: screenHeight * 0.1,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0),
),
);
},
),
),
],
),
),
],
),
),
),
);
}
Widget buildButton(String text) {
return Container(
width: screenWidth * 0.2,
height: screenHeight * 0.04,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(screenWidth * 0.05),
border: Border.all(
color: Colors.white,
),
),
child: Center(
child: Text(
text,
style: TextStyle(
color: Colors.white,
fontSize: screenWidth * 0.020,
),
),
),
);
}
}
void main() {
runApp(
MaterialApp(
home: HomePage(),
),
);
}
好的大家，我解决了这个问题！！！
结果：删除堆栈并再次编辑代码（小部件和项目位置），并且您应该使用 singlechildscrollview 和 finsh 包装主体！！！