如果我在这个Flutter屏幕中添加一个SingleChildScrollView，我的所有小部件都会消失。我得到一个空白白色屏幕。这是我的代码，没有滚动：
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(top: 33),
child: Stack(
alignment: AlignmentDirectional.topEnd,
children: [
Positioned(
top: 0,
right: 0,
child: Image.asset("assets/images/top_right.png"), //Icon
),
Positioned(
top: -10,
right: 0,
child: Image.asset("assets/images/profile_picture.png"),
),
Container(
margin: const EdgeInsets.all(20),
child: Column(
children: [
Container(
margin: const EdgeInsets.all(15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(),
child: const Text(
"Hi,",
style: TextStyle(
fontFamily: "poppin_regular",
fontSize: 27,
color: Colors.black),
)),
Container(
margin: const EdgeInsets.only(),
child: const Text(
"Jennifer",
style: TextStyle(
fontFamily: "poppin_semibold",
fontSize: 40,
color: Colors.black),
))
],
),
],
),
),
Flexible(
child: Container(
margin: const EdgeInsets.only(),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
margin: const EdgeInsets.only(top: 10),
elevation: 1,
shadowColor: Colors.black,
child: Row(
children: [
const SizedBox(
width: 305,
height: 50,
child: Padding(
padding:
EdgeInsets.only(left: 20, right: 20),
child: TextField(
keyboardType: TextInputType.multiline,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Search For Place",
hintStyle: TextStyle(
fontSize: 14,
color: Color.fromRGBO(
140, 140, 140, 100)),
),
),
), //Padding
),
Image.asset("assets/images/search.png")
],
),
),
const SizedBox(
width: double.infinity,
child: Text(
"What are you looking for",
style: TextStyle(
fontFamily: "poppin_semibold",
fontSize: 18),
)),
Container(
height: 133,
width: 345,
decoration: const BoxDecoration(
color: Color(0xffa3a3a3),
borderRadius: BorderRadius.all(
Radius.circular(10),
)),
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset("assets/images/Group 509.png"),
const Text(
"Request a trip",
style: TextStyle(
color: Colors.black,
fontFamily: "poppin_semibold",
fontSize: 18),
),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: const [
Text(
"When new trip matches your travel ",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
Text(
"needs Get Notified",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
],
),
Container(
margin: const EdgeInsets.only(),
height: 71,
width: 90,
child: Image.asset(
"assets/images/Group 539.png"))
],
)
],
),
),
),
),
Container(
height: 133,
width: 345,
decoration: const BoxDecoration(
color: Color(0xffffdacb),
borderRadius: BorderRadius.all(
Radius.circular(10),
)),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PostYourTrip(),
));
},
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset("assets/images/orangedots.png"),
const Text(
"Post your trip",
style: TextStyle(
color: Colors.black,
fontFamily: "poppin_semibold",
fontSize: 18),
),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Column(
children: const [
Text(
"Let others know about your plan so ",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
Text(
"they can join you on your journey ",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
],
),
Container(
margin: const EdgeInsets.only(),
height: 71,
width: 90,
child: Image.asset(
"assets/images/post_trip.png"))
],
)
],
),
),
),
),
Container(
height: 133,
width: 345,
decoration: const BoxDecoration(
color: Color(0xffbde4fe),
borderRadius: BorderRadius.all(
Radius.circular(10),
)),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FindTrip(),
));
},
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset("assets/images/bluedot.png"),
const Text(
"Find your trip",
style: TextStyle(
color: Colors.black,
fontFamily: "poppin_semibold",
fontSize: 18),
),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: const [
Text(
"Find a ride and carpool anywhere in",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
Text(
"Pakistan",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
],
),
Container(
margin: const EdgeInsets.only(),
height: 71,
width: 90,
child: Image.asset(
"assets/images/postgroup.png"))
],
)
],
),
),
),
),
],
),
),
)
],
),
)
],
),
),
);
}
}如果我在填充小部件之后或之前的top中添加一个SingleChildScrollView，则所有小部件都会消失。
请检查并提供解决方案。谢谢
2条答案
按热度按时间bnl4lu3b1#
请尝试以下代码并将我的网络映像替换为您的资产映像
代码流：
完整代码：
i2loujxw2#
你需要把一些固定的宽度和高度，因为你已经尝试 Package 一个无限高度的小部件到一个无限高度的小部件即stack -〉singlechildscrollview.所以你要做的是你需要固定内部小部件的高度，我已经把一个容器的宽度和高度作为例子