Question

我正在尝试使其可滚动... enter image description here由于某种原因它无法滚动，因此我尝试添加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(),
      ),

）;

RenderFlex在底部溢出1443像素

2 个答案: