简体   繁体   English

底部溢出 1443 像素的 RenderFlex

[英]A RenderFlex overflowed by 1443 pixels on the bottom

I am trying to make it scrollable... enter image description here For some reason its not not scrolling and i tried adding singleChildScrollview still not working.... Pls look at the picture to understand better... so i posted the full code so that you guys can help me better... This was the error i got "Consider applying a flex factor (eg using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size. This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView."我正在尝试使其可滚动...在此处输入图像描述由于某种原因它无法滚动,我尝试添加 singleChildScrollview 仍然无法正常工作...请查看图片以更好地理解...所以我发布了完整的代码这样你们就可以更好地帮助我......这是我得到的错误“考虑应用弹性因子(例如使用扩展小部件)来强制 RenderFlex 的子级适应可用空间而不是调整到它们的自然大小大小。这被认为是错误条件,因为它表明有内容看不到。如果内容合法地大于可用空间,请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行裁剪,或使用可滚动容器而不是 Flex,比如 ListView。”

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:memoryblog/helper/authenticate.dart';
import 'package:memoryblog/services/auth.dart';
import 'package:memoryblog/services/database.dart';
import 'package:memoryblog/views/create_blog.dart';

class MemoryRoom extends StatefulWidget {
  @override
  _MemoryRoomState createState() => _MemoryRoomState();
}

class _MemoryRoomState extends State<MemoryRoom> {

  AuthMethod authMethod = new AuthMethod();

  DatabaseMethods databaseMethod = new DatabaseMethods();

  Stream blogsStream;

  Widget BlogsList(){
    return Container(
      child: blogsStream != null ?  Column(
        children: <Widget>[
          StreamBuilder(
            stream: blogsStream,
            builder: (context, snapshot){
              if(snapshot.data == null) return CircularProgressIndicator();
              return ListView.builder(
                  padding: EdgeInsets.symmetric(horizontal: 16),
                  itemCount: snapshot.data.documents.length,
                  shrinkWrap: true,
                  itemBuilder: (context, index){
                    return BlogsTile(
                      authorName: snapshot.data.documents[index].data['memoryName'],
                      title: snapshot.data.documents[index].data['title'],
                      description: snapshot.data.documents[index].data['desc'],
                      imgUrl: snapshot.data.documents[index].data['imgUrl'],
                    );
                  }
              );
            },
          )
        ],
      )  : Container(
        alignment: Alignment.center,
        child: CircularProgressIndicator(),
      )
    );
  }

  @override
  void initState() {
    // TODO: implement initState
    databaseMethod.getData().then((result){
      setState(() {
        blogsStream = result;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: <Widget>[
            Text(
              "Memory"
            ),
            Text(
              "Blog",
              style: TextStyle(
                color: Colors.blue
              ),
            )
          ],
        ),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        actions: <Widget>[
          GestureDetector(
            onTap: (){
              authMethod.signOut();
              Navigator.pushReplacement(context, MaterialPageRoute(
                builder: (context) => Authenticate()
              ));
            },
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 16),
                child: Icon(Icons.power_settings_new)),
          )
        ],
      ),
      body: BlogsList(),
      floatingActionButton: Container(
        padding: EdgeInsets.symmetric(vertical: 20),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FloatingActionButton(
              onPressed: (){
                Navigator.push(context, MaterialPageRoute(
                  builder: (context) => CreateBlog()
                ));
              },
              child: Icon(Icons.add),
            )
          ],
        ),
      ),
    );
  }
}

class BlogsTile extends StatelessWidget {

  String imgUrl, title, description, authorName;
  BlogsTile({@required this.imgUrl, @required this.title, @required this.description, @required this.authorName,});
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 16),
      height: 170,
      child: Stack(
        children: <Widget>[
          ClipRRect(
              borderRadius: BorderRadius.circular(6),
              child: CachedNetworkImage(
                imageUrl: imgUrl,
                width: MediaQuery.of(context).size.width,
                fit: BoxFit.cover,
              )
          ),
          Container(
            height: 170,
            decoration: BoxDecoration(
              color: Colors.black45.withOpacity(0.3),
              borderRadius: BorderRadius.circular(6)
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  title,
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 25, fontWeight: FontWeight.w500),
                ),
                SizedBox(height: 4,),
                Text(
                    description,
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 17, fontWeight: FontWeight.w400),
                ),
                SizedBox(height: 4,),
                Text(authorName)
              ],
            ),
          )
        ],
      ),
    );
  }
}

Use ListView in place of the column.使用 ListView 代替列。 OR Wrap Column with SingleChildScrollView或使用 SingleChildScrollView 包装列

return Container(
child: blogsStream != null
    ? ListView(
        children: <Widget>[
          StreamBuilder(
            stream: blogsStream,
            builder: (context, snapshot) {
              if (snapshot.data == null) return CircularProgressIndicator();
              return ListView.builder(
                  padding: EdgeInsets.symmetric(horizontal: 16),
                  itemCount: snapshot.data.documents.length,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    return BlogsTile(
                      authorName:
                          snapshot.data.documents[index].data['memoryName'],
                      title: snapshot.data.documents[index].data['title'],
                      description:
                          snapshot.data.documents[index].data['desc'],
                      imgUrl: snapshot.data.documents[index].data['imgUrl'],
                    );
                  });
            },
          )
        ],
      )
    : Container(
        alignment: Alignment.center,
        child: CircularProgressIndicator(),
      ),

); );

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM