底部是否被Infinity PIXELS覆盖？

问题描述

当我实现此代码时，显示屏将显示由无穷大像素覆盖的底部。有人知道为什么吗？我希望图像选择器位于左上角。

 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

 Scaffold(
              body: Builder(
               builder: (context)=> Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.center,

所以这就是我的整个脚本也许更好理解。

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,Center(child: Icon(Icons.chat,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,fontSize: 25.0,fontWeight: FontWeight.bold),);});
                  } 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,Row(
                        mainAxisAlignment: MainAxisAlignment.start,Center(child: Icon(Icons.settings,];

    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),BottomNavigationBarItem(icon:  Icon(Icons.local_grocery_store,activeIcon:  Icon(Icons.local_grocery_store,title: Text('Store',BottomNavigationBarItem(icon:  Icon(Icons.chat,activeIcon:  Icon(Icons.chat,title: Text('Chat',BottomNavigationBarItem(icon:  Icon(Icons.supervisor_account,activeIcon:  Icon(Icons.supervisor_account,title: Text('Profile',BottomNavigationBarItem(icon:  Icon(Icons.settings,activeIcon:  Icon(Icons.settings,title: Text('Settings',];

    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,titleSpacing: -45,body: _kTabPages[_currentTabIndex],bottomNavigationBar: bottomNavBar,);

  }
}

已更新

Scaffold(
              body: Builder(
                builder: (context)=> Container(
                  height: 200,child: ListView(
                    children: <Widget>[
                      SizedBox(height: 5.0,

所以我再次修改了我的脚本

ListView(
          children: <Widget> [
            Center(
              child: FutureBuilder(
                future: getUserInfo(),Scaffold(
              body: Builder(
                builder: (context)=> Container(
                  height: 100,children:<Widget> [
                          Container(
                            padding:  EdgeInsets.only(left: 0,top: 0),

已解决的代码！

 ListView(
        children: <Widget> [
          Center(
            child: FutureBuilder(
              future: getUserInfo(),AsyncSnapshot<DocumentSnapshot> snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  return ListView.builder(
                      shrinkWrap: true,int index) {
                        return ListTile(
                          subtitle: Text(snapshot.data.data()["Email"],style: TextStyle(
                            color: Colors.white,);});
                } else if (snapshot.connectionState == ConnectionState.none) {
                  return Text("No data");}
                return Center(
                  child: SpinKitFadingCircle(color: Colors.white,);
              },SizedBox(height: 5.0,Row(
            mainAxisAlignment: MainAxisAlignment.start,children:<Widget> [
              Container(
                padding:  EdgeInsets.only(left: 0,child: CircleAvatar(
                  radius: 60.0,child: ClipOval(
                    child: SizedBox(
                      width: 110.0,fit:BoxFit.fill)
                          :Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png",Padding(
                padding: EdgeInsets.only(top: 50.0),child: IconButton(
                  icon: Icon(
                    Icons.camera_alt,color: Colors.white,onPressed: (){
                    getImage();
                  },)
            ],RaisedButton(
            color: Colors.white,onPressed: (){
              uploadPic(context);
            },

解决方法

为什么出错？
底部因无穷像素而溢出，因为默认情况下，列将占据屏幕上所有可用的高度，并且如果通过为其子元素添加字体大小，填充，边距等方式为其子元素赋予高度，则在某些时候它的子元素将不适合列并给出此错误。
解决方案：
使用 ListView ，因为它添加了滚动功能，但是在这种情况下，您可以给列指定特定的高度，以便column知道其滚动的区域。

要将元素与列或行中的左上对齐：请使用 crossAxisAlignment.start

,

您可以用sum(values)

包裹该列

发生这种溢出是因为在这种情况下，列占用了屏幕的所有可用空间。