如何解决dart - 颤动单个子滚动视图更改屏幕的小部件布局
我正在尝试使用单个子滚动视图小部件使我的颤动页面可滚动。但是这样做之后，屏幕的整个小部件布局都搞砸了。下面我附上了我的应用程序的屏幕截图，它显示了我想要发生的事情，而是在我使用单个子滚动视图小部件后发生的事情。
import 'package:Flutter/material.dart';
import 'package:formula1_app/models/driver_model.dart';
class DriverBioScreen extends StatefulWidget {
final Driver driver;
DriverBioScreen({required this.driver});
@override
_DriverBioScreenState createState() => _DriverBioScreenState();
}
class _DriverBioScreenState extends State<DriverBioScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: 1500,width: MediaQuery.of(context).size.width,child: Stack(
children: [
Container(
height: 250,decoration: Boxdecoration(
color: Colors.blue,borderRadius: BorderRadius.circular(30),),child: ClipRRect(
borderRadius: BorderRadius.circular(30),child: Image(
image: Assetimage('assets/images/driver_profile_bg_darken.jpg'),fit: BoxFit.cover,)
),Padding(
padding: EdgeInsets.symmetric(vertical: 30,horizontal: 20),child: Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back),iconSize: 30,color: Colors.white,onpressed: () {
Navigator.pop(context);
},)
],SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 0,left: 20),child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
Row(
children: [
Container(
height: 80,width: 4,decoration: Boxdecoration(
color: Colors.blue[800]
),Padding(
padding: const EdgeInsets.only(left: 10),child: Column(
crossAxisAlignment: CrossAxisAlignment.start,children: [
Text(
widget.driver.firstName,style: TextStyle(
fontSize: 25,color: Colors.white
),Text(
widget.driver.lastName,style: TextStyle(
fontSize: 32,fontWeight: FontWeight.bold
),Row(
children: [
Text(
widget.driver.number,style: TextStyle(
fontSize: 18,fontWeight: FontWeight.bold
),Text(
' | ${widget.driver.team}',)
],)
],],Image(
image: Assetimage(widget.driver.driverImageUrl),height: 200,// 200
width: 200,//200
),)
],Column(
children: [
Column(
children: [
Text(
"Achievements",style: TextStyle(
fontSize: 32,fontWeight: FontWeight.bold
),Padding(
padding: EdgeInsets.only(top: 0,child: Row(
crossAxisAlignment: CrossAxisAlignment.start,children: [
Container(
height: 400,width: 228,child: Column(
crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
Text(
'Wins',style: TextStyle(
fontSize: 30,fontWeight: FontWeight.bold
),Text(
'Podiums',Text(
'dhl Fastest Laps',style: TextStyle(
fontSize: 25,Text(
'Grands Prix Entered',Text(
'World Championships',)
],Padding(
padding: EdgeInsets.only(left: 80),child: Container(
height: 400,width: 100,child: Column(
crossAxisAlignment: CrossAxisAlignment.start,children: [
Padding(
padding: EdgeInsets.only(top: 29),child: Text(
(widget.driver.wins),style: TextStyle(
fontSize: 30
),Padding(
padding: EdgeInsets.only(top: 29),child: Text(
widget.driver.podiums,Padding(
padding: EdgeInsets.only(top: 25),child: Text(
widget.driver.fastestLap,Padding(
padding: EdgeInsets.only(top: 40),child: Text(
widget.driver.gpEntered,Padding(
padding: EdgeInsets.only(top: 59),child: Text(
widget.driver.worldchampionships,style: TextStyle(
fontSize: 30,)
],Column(
children: [
Text(
'Team',style: TextStyle(
fontSize: 32,fontWeight: FontWeight.bold
),// Image(
// image: Assetimage(widget.driver.team),// )
],)///,)
);
}
}This is what happens after i added the singlechildscrolview widget
解决方法
您可以使用ListView
class _DriverBioScreenState extends State<DriverBioScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
Container(
height: 1500,width: MediaQuery.of(context).size.width,child: Stack(
children: [
Container(
height: 250,decoration: BoxDecoration(
color: Colors.blue,borderRadius: BorderRadius.circular(30),),child: ClipRRect(
borderRadius: BorderRadius.circular(30),child: Image(
image: AssetImage(
'assets/images/driver_profile_bg_darken.jpg'),fit: BoxFit.cover,)),Padding(
padding: EdgeInsets.symmetric(vertical: 30,horizontal: 20),child: Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back),iconSize: 30,color: Colors.white,onPressed: () {
Navigator.pop(context);
},)
],SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 0,left: 20),child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
Row(
children: [
Container(
height: 80,width: 4,decoration:
BoxDecoration(color: Colors.blue[800]),Padding(
padding: const EdgeInsets.only(left: 10),child: Column(
crossAxisAlignment: CrossAxisAlignment.start,children: [
Text(
widget.driver.firstName,style: TextStyle(
fontSize: 25,color: Colors.white),Text(
widget.driver.lastName,style: TextStyle(
fontSize: 32,fontWeight: FontWeight.bold),Row(
children: [
Text(
widget.driver.number,style: TextStyle(
fontSize: 18,Text(
' | ${widget.driver.team}',style: TextStyle(
fontSize: 18,)
],)
],],Image(
image: AssetImage(widget.driver.driverImageUrl),height: 200,// 200
width: 200,//200
),)
],Column(
children: [
Column(
children: [
Text(
"Achievements",style: TextStyle(fontSize: 32,Padding(
padding: EdgeInsets.only(top: 0,child: Row(
crossAxisAlignment: CrossAxisAlignment.start,children: [
Container(
height: 400,width: 228,child: Column(
crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
Text(
'Wins',style: TextStyle(
fontSize: 30,Text(
'Podiums',Text(
'DHL Fastest Laps',style: TextStyle(
fontSize: 25,Text(
'Grands Prix Entered',Text(
'World Championships',)
],Padding(
padding: EdgeInsets.only(left: 80),child: Container(
height: 400,width: 100,child: Column(
crossAxisAlignment: CrossAxisAlignment.start,children: [
Padding(
padding: EdgeInsets.only(top: 29),child: Text(
(widget.driver.wins),style: TextStyle(fontSize: 30),Padding(
padding: EdgeInsets.only(top: 29),child: Text(
widget.driver.podiums,Padding(
padding: EdgeInsets.only(top: 25),child: Text(
widget.driver.fastestLap,Padding(
padding: EdgeInsets.only(top: 40),child: Text(
widget.driver.gpEntered,Padding(
padding: EdgeInsets.only(top: 59),child: Text(
widget.driver.worldchampionships,style: TextStyle(
fontSize: 30,)
],Column(
children: [
Text(
'Team',style: TextStyle(
fontSize: 32,// Image(
// image: AssetImage(widget.driver.team),// )
],)
///,);
}
}
用扩展包装图像小部件
Expanded(
child:Image(
image: AssetImage(widget.driver.driverImageUrl),// 200
width: 200,//200
),因为您的图像小部件占用了所有空间
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
