簡體   English   中英

Flutter:ListView 里面 ListView.builder

[英]Flutter:ListView inside ListView.builder

我正在嘗試帶來一個容器列表,並且我想使用火存儲更改此容器列表中的詳細信息。 但是當我運行程序時,頁面顯示為空白。 我想要的 output 就像這張圖片,我得到的 output。 我的第二個問題是如何將圖像添加到 firestore 內的字段。
在此先感謝,在堆棧溢出中發布問題真的很難。

      body: StreamBuilder(
      stream: Firestore.instance.collection('Event').snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
         const Text('No Event');
        } 
        else if(snapshot.hasError){ const Text('No data avaible right now'); } 
        else {
          return ListView.builder(
              itemCount: snapshot.data.documents.length,
              itemBuilder: (context, index) {
                DocumentSnapshot myEvent = snapshot.data.documents[index];

                 
                return ListView(
                 scrollDirection: Axis.vertical,
                  children: <Widget>[
                    //1st box

                  Container(
                      margin: EdgeInsets.all(
                          SizeConfig.safeBlockHorizontal * 4),
                      child: Container(
                        child: new FittedBox(
                          child: Material(
                            // color: Colors.white,
                            elevation: 14.0,
                            borderRadius: BorderRadius.circular(24.0),
                            shadowColor: Color(0x802196F3),
                            child: Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Container(
                                  child: Padding(
                                    padding: EdgeInsets.only(
                                        left:
                                            SizeConfig.safeBlockHorizontal *
                                                4),
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceEvenly,
                                      children: <Widget>[
                                        Padding(
                                          padding: const EdgeInsets.only(
                                              left: 8.0),
                                          child: Container(
                                              child: Text(
                                            '${myEvent['date_1']}',
                                            style: TextStyle(
                                                color: Colors.black54,
                                                fontSize: 24.0,
                                                fontWeight:
                                                    FontWeight.bold),
                                          )),
                                        ),
                                        SizedBox(
                                          height: 10,
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.only(
                                              left: 8.0),
                                          child: Container(
                                              child: Column(
                                            mainAxisAlignment:
                                                MainAxisAlignment
                                                    .spaceEvenly,
                                            children: <Widget>[
                                              Container(
                                                  child: Text(
                                                '${myEvent['title_1']}',
                                                style: TextStyle(
                                                    color: Colors.black,
                                                    fontSize: 22.0,
                                                    fontWeight:
                                                        FontWeight.bold),
                                              )),
                                              SizedBox(
                                                height: 10,
                                              ),
                                              Container(
                                                  child: Text(
                                                '${myEvent['details_1_a']}',
                                                style: TextStyle(
                                                  color: Colors.black54,
                                                  fontSize: 18.0,
                                                ),
                                              )),
                                              Container(
                                                  child: Text(
                                                '${myEvent['details_1_b']}',
                                                style: TextStyle(
                                                  color: Colors.black54,
                                                  fontSize: 18.0,
                                                ),
                                              )),
                                            ],
                                          )),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                SizedBox(
                                  width:
                                      SizeConfig.safeBlockHorizontal * 18,
                                ),
                                Container(
                                  width:
                                      SizeConfig.safeBlockHorizontal * 60,
                                  height:
                                      SizeConfig.safeBlockHorizontal * 55,
                                  child: ClipRRect(
                                    borderRadius:
                                        new BorderRadius.circular(24.0),
                                    child: Image.network(
                                      '${myEvent['image_1']}',
                                      fit: BoxFit.fill,
                                      alignment: Alignment.topRight,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),

                    //2nd box

                    Container(
                      margin: EdgeInsets.all(
                          SizeConfig.safeBlockHorizontal * 4),
                      child: Container(
                        child: new FittedBox(
                          child: Material(
                            // color: Colors.white,
                            elevation: 14.0,
                            borderRadius: BorderRadius.circular(24.0),
                            shadowColor: Color(0x802196F3),
                            child: Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Container(
                                  child: Padding(
                                    padding: EdgeInsets.only(
                                        left:
                                            SizeConfig.safeBlockHorizontal *
                                                4),
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceEvenly,
                                      children: <Widget>[
                                        Padding(
                                          padding: const EdgeInsets.only(
                                              left: 8.0),
                                          child: Container(
                                              child: Text(
                                            '${myEvent['date_2']}',
                                            style: TextStyle(
                                                color: Colors.black54,
                                                fontSize: 24.0,
                                                fontWeight:
                                                    FontWeight.bold),
                                          )),
                                        ),
                                        SizedBox(
                                          height: 10,
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.only(
                                              left: 8.0),
                                          child: Container(
                                            child: Column(
                                              mainAxisAlignment:
                                                  MainAxisAlignment
                                                      .spaceEvenly,
                                              children: <Widget>[
                                                Container(
                                                    child: Text(
                                                  '${myEvent['title_2']}',
                                                  style: TextStyle(
                                                      color: Colors.black,
                                                      fontSize: 22.0,
                                                      fontWeight:
                                                          FontWeight.bold),
                                                )),
                                                SizedBox(
                                                  height: 10,
                                                ),
                                                Container(
                                                    child: Text(
                                                  '${myEvent['details_2_a']}',
                                                  style: TextStyle(
                                                    color: Colors.black54,
                                                    fontSize: 18.0,
                                                  ),
                                                )),
                                                Container(
                                                    child: Text(
                                                  '${myEvent['details_2_b']}',
                                                  style: TextStyle(
                                                    color: Colors.black54,
                                                    fontSize: 18.0,
                                                  ),
                                                )),
                                              ],
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                SizedBox(
                                  width:
                                      SizeConfig.safeBlockHorizontal * 18,
                                ),
                                Container(
                                  width:
                                      SizeConfig.safeBlockHorizontal * 60,
                                  height:
                                      SizeConfig.safeBlockHorizontal * 55,
                                  child: ClipRRect(
                                    borderRadius:
                                        new BorderRadius.circular(24.0),
                                    child:  Image.network(
                                      '${myEvent['image_2']}',
                                      fit: BoxFit.fill,
                                      alignment: Alignment.topRight,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),

我認為您不需要第二個列表視圖,但如果需要,請嘗試以下操作:

body: StreamBuilder(
      stream: Firestore.instance.collection('Event').snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
         const Text('No Event');
        } 
        else if(snapshot.hasError){ const Text('No data avaible right now'); } 
        else {
          return ListView.builder(
              itemCount: snapshot.data.documents.length,
              itemBuilder: (context, index) {
                DocumentSnapshot myEvent = snapshot.data.documents[index];

                 
                return ListView(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  children: <Widget>[
                    //1st box

                    ...

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM