SingleChildScrollView flutter 中的 Streambuilder 錯誤

Question

這是封裝在腳手架主體內的 SingleChildScrollView 下的流構建器。 將 streambuilder 置於 SingleChildScrollView 下后，滾動視圖不起作用。 StreamBuilder 通過雲 Firestore 從 firebase 獲取數據。

body: Container(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Expanded(
                    child: StreamBuilder<QuerySnapshot>(
                      stream: Firestore.instance
                          .collection(
                              'blogsDatabase/${widget.blogUIDInFirebase}/comments')
                          .snapshots(),
                      builder: (context, snapshot) {
                        if (!snapshot.hasData) {
                          return Center(child: CircularProgressIndicator());
                        }
                        final _commentsFetched = snapshot.data.documents;
                        List<CommentBubble> _commentBubbleWidget = [];
    
                        for (var comment in _commentsFetched) {
                          _commentBubbleWidget.add(
                            CommentBubble(
                              name: comment.data['name'],
                              comment: comment.data['comment'],
                            ),
                          );
                        }
                        return Expanded(
                          child: ListView(
                            children: _commentBubbleWidget
                          ),
                        );
                      },
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.all(10),
                    child: Material(
                      shadowColor: Colors.orange,
                      child: TextField(
                        onChanged: (value) {
                          readerAddComment = value;
                        },
                        keyboardType: TextInputType.emailAddress,
                        decoration:
                            kRegDetailFieldDeco.copyWith(hintText: 'Add comment'),
                      ),
                    ),
                  ),
                  FlatButton(
                      onPressed: () {
                        if (_nameReader != null &&
                            widget.readerEmail != null &&
                            readerAddComment != null) {
                          Firestore.instance
                              .collection(
                                  'blogsDatabase/${widget.blogUIDInFirebase}/comments')
                              .document()
                              .setData(
                            {
                              'name': _nameReader,
                              'email': widget.readerEmail,
                              'comment': readerAddComment,
                            },
                          );
                        }
                      },
                      child: Text('Add comment')),
                ],
              ),
            ),
          ),

評論氣泡類，它是一個無狀態的小部件，將顯示評論。

class CommentBubble extends StatelessWidget {
  final String name;
  final String comment;

  CommentBubble({this.name, this.comment});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: Text('$name --- $comment'),
    );
  }
}

控制台中顯示的錯誤

RenderBox was not laid out: RenderRepaintBoundary#dd879 relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'

Answer 1

它正在發生，因為您的小部件結構由於存在錯誤而類似於

-Container
  -SingleChildScrollView  
    -Expanded
       -Column
         -Expanded
             -Expanded
               -ListView

現在看看你得到的這個錯誤，它是說它是關於大小的錯誤，將你的列包裝在其他一些小部件中而不是擴展中

Answer 2

您似乎需要空間將 ListView 放在 Column() 中。 移除 Expanded 小部件，並將其替換為 Container。 例如：

容器（高度：100，孩子：ListView（孩子：_commentBubbleWidget），）

但是，我不建議您使用上述解決方案。 這對用戶界面來說太糟糕了（只是我的意見）。 因為，您在 Column 內使用 ListView。 通過使用這種方式，您必須決定 ListView 的高度。 不要忘記，手機的尺寸各不相同。

最好將 ListView 分開，並將您的文本字段放在 BottomNavigationBar 中。 這是我的：

Scaffold(
  appBar: AppBar(
    title: textCustom(
        'Review ${widget.destination}', Colors.black87, 20, 'Hind'),
    leading: IconButton(
        icon: Icon(
          Icons.arrow_back_ios,
        ),
        onPressed: () {
          Navigator.pop(context);
        }),
    iconTheme: IconThemeData(color: Colors.black87, size: 10),
    backgroundColor: Colors.transparent,
    elevation: 0.0,
  ),
  body: Padding(
    padding: const EdgeInsets.all(8.0),
    child: StreamBuilder<QuerySnapshot>(
        stream: kategori
            .document(widget.kategori)
            .collection(widget.subKategori)
            .document(widget.docId)
            .collection("review")
            .orderBy("timeStamp", descending: true)
            .snapshots(),
        builder:
            (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) return new Text('${snapshot.error}');
          if (snapshot.data == null)
            return Center(
                child: textCustom(
                    'Loading...', Colors.black87, 14, 'Montserrat'));

          final review= snapshot.data.documents;
          return snapshot.data.documents.isNotEmpty
              ? ListView.builder(
                  itemCount: review.length,
                  itemBuilder: (context, index) {
                    return Comment(
                      name: review[index]['name'],
                      profilePhoto: review[index]['foto'],
                      comments: review[index]['review'],
                      date: (review[index]['timeStamp'] != null)
                          ? DateFormat.yMMMd().format(DateTime.parse(
                              review[index]['timeStamp']
                                  .toDate()
                                  .toString(),
                            ))
                          : '',
                    );
                  })
              : Center(child: Text('Empty'));
        }),
  ),
  bottomNavigationBar: Padding(
    padding: MediaQuery.of(context).viewInsets,
    child: BottomAppBar(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: Row(
          children: <Widget>[
            Expanded(
                child: TextField(
              controller: textMessageController,
              onChanged: (text) {
                input = text;
                setState(() {
                  enableButton = text.isNotEmpty;
                });
              },
              textCapitalization: TextCapitalization.sentences,
              maxLines: null,
              style: TextStyle(
                  color: Colors.black87,
                  fontSize: 16,
                  fontFamily: 'Montserrat'),
              decoration: InputDecoration(
                enabledBorder: UnderlineInputBorder(
                  borderSide: new BorderSide(color: Colors.white),
                  borderRadius: new BorderRadius.circular(8.0),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: new BorderSide(color: Colors.white),
                  borderRadius: new BorderRadius.circular(8.0),
                ),
                contentPadding:
                    EdgeInsets.only(left: 16.0, bottom: 16.0, top: 16.0),
                hintText: 'Write some review',
              ),
            )),
            SizedBox(
              width: 8.0,
            ),
            enableButton
                ? IconButton(
                    onPressed: handleSendMessage,
                    icon: Icon(
                      Icons.send,
                      color: Color(0xFFDB5C48),
                    ))
                : IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.send,
                      color: Colors.grey,
                    ))
          ],
        ),
      ),
    ),
  ),
);