无限像素溢出底部？
[英]BOTTOM OVERFLOWED BY Infinity PIXELS?
问题描述
when i implement this code the display shows Bottom Overflowed by infinity pixels.
当我执行此代码时，显示器显示底部溢出无限像素。 Anyone knows why?有谁知道为什么？ I want that the The Image Picker is in the top left corner.我希望图像选择器位于左上角。
Scaffold(
body: Builder(
builder: (context)=> Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 5.0,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:<Widget> [
Align(
alignment: Alignment.center,
child: CircleAvatar(
radius: 60.0,
backgroundColor: Colors.white,
child: ClipOval(
child: SizedBox(
width: 110.0,
height: 110.0,
child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
:Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 100.0, right: 40),
child: IconButton(
icon: Icon(
Icons.camera_alt,
size: 30.0,
),
onPressed: (){
getImage();
},
),
)
],
),
RaisedButton(
color: Colors.white,
onPressed: (){
uploadPic(context);
},
),
],
),
),
),
),
Here is what it Looks like now => but i want that the Image Picker is in the top left corner这是现在的样子=>但我希望图像选择器位于左上角
So I have changed the script the Error is now gone but the Image picker is not display.所以我更改了脚本，错误现在消失了，但图像选择器没有显示。 It should be look like this here这里应该是这样的
Scaffold(
body: Builder(
builder: (context)=> Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 5.0,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:<Widget> [
Align(
alignment: Alignment.center,
child: CircleAvatar(
radius: 60.0,
backgroundColor: Colors.white,
child: ClipOval(
child: SizedBox(
width: 110.0,
height: 110.0,
child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
:Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 100.0, right: 40),
child: IconButton(
icon: Icon(
Icons.camera_alt,
size: 30.0,
),
onPressed: (){
getImage();
},
),
)
],
),
RaisedButton(
color: Colors.white,
onPressed: (){
uploadPic(context);
},
),
],
),
),
),
),
],
),
So thats my whole script Maybe that is better to understand.所以这就是我的整个脚本也许更好理解。
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
File _image;
int _currentTabIndex = 0;
Future getImage() async{
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
print('Image Path $_image');
});
}
Future uploadPic(BuildContext context)async{
String fileName=basename(_image.path);
StorageReference firebaseStorageRef=FirebaseStorage.instance.ref().child(fileName);
StorageUploadTask uploadTask=firebaseStorageRef.putFile(_image);
StorageTaskSnapshot taskSnapshot= await uploadTask.onComplete;
setState(() {
print('Profile Picture uploaded');
Scaffold.of(context).showSnackBar(SnackBar(content: Text('Profile Picture Uploaded')));
});
}
@override
Widget build(BuildContext context) {
Future<DocumentSnapshot> getUserInfo()async{
var firebaseUser = await FirebaseAuth.instance.currentUser;
return await Firestore.instance.collection("SerX").doc(firebaseUser.uid).get();
}
final _kTabPages = <Widget>[
Center(child: Icon(Icons.new_releases, size: 64.0, color: Colors.white)),
Center(child: Icon(Icons.local_grocery_store, size: 64.0, color: Colors.white)),
Center(child: Icon(Icons.chat, size: 64.0, color: Colors.white)),
ListView(
children: <Widget> [
Center(
child: FutureBuilder(
future: getUserInfo(),
builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return ListView.builder(
shrinkWrap: true,
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return ListTile(
subtitle: Text(snapshot.data.data()["Email"], style: TextStyle(
color: Colors.white,
fontFamily: 'Orbitron',
fontSize: 10.0,
fontWeight: FontWeight.bold,),textAlign: TextAlign.right,
),
title: Text(snapshot.data.data()["Username"], style: TextStyle(
color: Colors.white,
fontFamily: 'Orbitron',
fontSize: 25.0,
fontWeight: FontWeight.bold),textAlign: TextAlign.right,),
);});
} else if (snapshot.connectionState == ConnectionState.none) {
return Text("No data");}
return Center(
child: SpinKitFadingCircle(color: Colors.white, size: 20.0),heightFactor: 29,
);
},
),
),
Scaffold(
body: Builder(
builder: (context)=> Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 5.0,),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children:<Widget> [
Align(
alignment: Alignment.center,
child: CircleAvatar(
radius: 60.0,
backgroundColor: Colors.white,
child: ClipOval(
child: SizedBox(
width: 110.0,
height: 110.0,
child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
:Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 100.0, right: 40),
child: IconButton(
icon: Icon(
Icons.camera_alt,
size: 30.0,
),
onPressed: (){
getImage();
},
),
)
],
),
RaisedButton(
color: Colors.white,
onPressed: (){
uploadPic(context);
},
),
],
),
),
),
),
],
),
Center(child: Icon(Icons.settings, size: 64.0, color: Colors.white)),
];
final _kBottmonNavBarItems = <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.new_releases, color: Colors.black), activeIcon: Icon(Icons.new_releases,color: Colors.grey) ,title: Text('News', style: TextStyle(
color: Color(0xFF000000),
fontSize: 10.0,
fontWeight: FontWeight.bold,
fontFamily: 'Orbitron',
),),),
BottomNavigationBarItem(icon: Icon(Icons.local_grocery_store ,color: Colors.black),activeIcon: Icon(Icons.local_grocery_store,color: Colors.grey), title: Text('Store', style: TextStyle(
color: Color(0xFF000000),
fontSize: 10.0,
fontWeight: FontWeight.bold,
fontFamily: 'Orbitron',
),),
),
BottomNavigationBarItem(icon: Icon(Icons.chat,color: Colors.black), activeIcon: Icon(Icons.chat,color: Colors.grey), title: Text('Chat', style: TextStyle(
color: Color(0xFF000000),
fontSize: 10.0,
fontWeight: FontWeight.bold,
fontFamily: 'Orbitron',
),),),
BottomNavigationBarItem(icon: Icon(Icons.supervisor_account,color: Colors.black), activeIcon: Icon(Icons.supervisor_account,color: Colors.grey), title: Text('Profile', style: TextStyle(
color: Color(0xFF000000),
fontSize: 10.0,
fontWeight: FontWeight.bold,
fontFamily: 'Orbitron',
),),),
BottomNavigationBarItem(icon: Icon(Icons.settings,color: Colors.black), activeIcon: Icon(Icons.settings,color: Colors.grey), title: Text('Settings', style: TextStyle(
color: Color(0xFF000000),
fontSize: 10.0,
fontWeight: FontWeight.bold,
fontFamily: 'Orbitron',
),),),
];
assert(_kTabPages.length == _kBottmonNavBarItems.length);
final bottomNavBar = BottomNavigationBar(
items: _kBottmonNavBarItems,
fixedColor: Colors.black,
currentIndex: _currentTabIndex,
type: BottomNavigationBarType.fixed,
onTap: (int index) {
setState(() {
_currentTabIndex = index;
});
},
);
return Scaffold(
appBar: AppBar(
bottom: PreferredSize(
child: Container(
color: Colors.white,
height: 4.0,
),
preferredSize: Size.fromHeight(0)),
backgroundColor: Colors.black,
leading: Container(),
title: Text('Ser X' , style: TextStyle(
color: Color(0xFFFFFFFF),
fontSize: 35,
fontWeight: FontWeight.bold,
fontFamily: 'Orbitron',
),),
titleSpacing: -45,
),
body: _kTabPages[_currentTabIndex],
backgroundColor: Colors.black,
bottomNavigationBar: bottomNavBar,
);
}
}
Updated更新
Scaffold(
body: Builder(
builder: (context)=> Container(
height: 200,
child: ListView(
children: <Widget>[
SizedBox(height: 5.0,),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children:<Widget> [
Align(
alignment: Alignment.center,
child: CircleAvatar(
radius: 60.0,
backgroundColor: Colors.white,
child: ClipOval(
child: SizedBox(
width: 110.0,
height: 110.0,
child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
:Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 100.0, right: 40),
child: IconButton(
icon: Icon(
Icons.camera_alt,
size: 30.0,
),
onPressed: (){
getImage();
},
),
)
],
),
RaisedButton(
color: Colors.white,
onPressed: (){
uploadPic(context);
},
),
],
),
),
),
),
So I uprgaded my Script again所以我再次升级了我的脚本
ListView(
children: <Widget> [
Center(
child: FutureBuilder(
future: getUserInfo(),
builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return ListView.builder(
shrinkWrap: true,
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return ListTile(
subtitle: Text(snapshot.data.data()["Email"], style: TextStyle(
color: Colors.white,
fontFamily: 'Orbitron',
fontSize: 10.0,
fontWeight: FontWeight.bold,),textAlign: TextAlign.right,
),
title: Text(snapshot.data.data()["Username"], style: TextStyle(
color: Colors.white,
fontFamily: 'Orbitron',
fontSize: 25.0,
fontWeight: FontWeight.bold),textAlign: TextAlign.right,),
);});
} else if (snapshot.connectionState == ConnectionState.none) {
return Text("No data");}
return Center(
child: SpinKitFadingCircle(color: Colors.white, size: 20.0),heightFactor: 29,
);
},
),
),
Scaffold(
body: Builder(
builder: (context)=> Container(
height: 100,
child: ListView(
children: <Widget>[
SizedBox(height: 5.0,),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children:<Widget> [
Container(
padding: EdgeInsets.only(left: 0, top: 0),
child: CircleAvatar(
radius: 60.0,
backgroundColor: Colors.white,
child: ClipOval(
child: SizedBox(
width: 110.0,
height: 110.0,
child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
:Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 100.0, right: 40),
child: IconButton(
icon: Icon(
Icons.camera_alt,
size: 30.0,
),
onPressed: (){
getImage();
},
),
)
],
),
RaisedButton(
color: Colors.white,
onPressed: (){
uploadPic(context);
},
),
],
),
),
),
),
],
),
Solved Code!解决了代码！
ListView(
children: <Widget> [
Center(
child: FutureBuilder(
future: getUserInfo(),
builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return ListView.builder(
shrinkWrap: true,
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return ListTile(
subtitle: Text(snapshot.data.data()["Email"], style: TextStyle(
color: Colors.white,
fontFamily: 'Orbitron',
fontSize: 10.0,
fontWeight: FontWeight.bold,),textAlign: TextAlign.right,
),
title: Text(snapshot.data.data()["Username"], style: TextStyle(
color: Colors.white,
fontFamily: 'Orbitron',
fontSize: 25.0,
fontWeight: FontWeight.bold),textAlign: TextAlign.right,),
);});
} else if (snapshot.connectionState == ConnectionState.none) {
return Text("No data");}
return Center(
child: SpinKitFadingCircle(color: Colors.white, size: 20.0),heightFactor: 29,
);
},
),
),
SizedBox(height: 5.0,),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children:<Widget> [
Container(
padding: EdgeInsets.only(left: 0, top: 0),
child: CircleAvatar(
radius: 60.0,
backgroundColor: Colors.white,
child: ClipOval(
child: SizedBox(
width: 110.0,
height: 110.0,
child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
:Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 50.0),
child: IconButton(
icon: Icon(
Icons.camera_alt,
color: Colors.white,
size: 30.0,
),
onPressed: (){
getImage();
},
),
)
],
),
RaisedButton(
color: Colors.white,
onPressed: (){
uploadPic(context);
},
),
],
),
2 个解决方案
解决方案1
1 已采纳 2020-08-28 17:25:14
Why error?为什么会出错？
Bottom is overflowed by infinity pixel because by default column take all the height available on the screen and if you give height to its child elements like by adding font size,padding,margin etc to its children then at some point its child does not fit into column and give this error.底部被无穷大像素溢出，因为默认情况下，列会占用屏幕上的所有可用高度，如果您为其子元素添加高度，例如向其子元素添加字体大小、填充、边距等，那么在某些时候它的子元素不适合列并给出此错误。
Solution:解决方案：
Use ListView because its adding scroll functionality but in this case you give specific height to column so column know the area in which it scroll.使用ListView是因为它添加了滚动功能，但在这种情况下，您可以为列指定特定高度，以便列知道它滚动的区域。
To Align element to top left in column or row : use crossAxisAlignment.start将元素对齐到列或行的左上角：使用crossAxisAlignment.start
解决方案2
1 2020-08-28 20:26:48
You can wrap the column with a SingleChildScrollView.您可以使用SingleChildScrollView.包装该列SingleChildScrollView.
This overflow occured because the column is taking all available space that is the height of the screen in this case.发生这种溢出是因为在这种情况下，列占用了屏幕高度的所有可用空间。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Flutter 滚动问题 - RenderFlex 底部溢出 192 像素 - Flutter scroll issue - A RenderFlex overflowed by 192 pixels on the bottom
如何正确编写以下引发此错误的代码（A RenderFlex 在底部溢出 126 像素。） - How to write the following code correctly which is throwing this error (A RenderFlex overflowed by 126 pixels on the bottom.)
Flutter 页面刷新问题 | ListView 显示错误“BOTTOM OVERFLOWED BY 98 PIXEL” - Flutter Page refresh problem | ListView showing a error “BOTTOM OVERFLOWED BY 98 PIXEL”
更新文档时无限循环 Firebase - Infinity Loop while updating a document Firebase
两个方向无限滚动与 Firebase/Firestore 后端 - Two direction infinity scroll with Firebase/Firestore backend
Firebase 动态链接与导航导致无限循环 - Firebase Dynamic Link with navigate cause infinity loop
滚动到页面加载的底部 - Scroll to bottom on page load
当我尝试使用 useEffect 将信息从 firebase 获取到 nextjs 时出现无限循环 - Infinity loop when I try to get information from firebase into nextjs using useEffect
如何自动滚动到recyclerVew的底部？ - How to scroll automatically to the bottom of the recyclerVew?
Flutter: Stream 生成器 -> 列表视图 99,285 个意外像素 - Flutter: Stream Builder -> List View 99,285 unexpected pixels
相关标签