底部溢出 1443 像素的 RenderFlex

Question

我正在嘗試使其可滾動...在此處輸入圖像描述由於某種原因它無法滾動，我嘗試添加 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)
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

使用 ListView 代替列。 或使用 SingleChildScrollView 包裝列

Answer 2

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(),
      ),

);