首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >具有动态高度项的水平ListView.builder

具有动态高度项的水平ListView.builder
EN

Stack Overflow用户
提问于 2022-02-03 19:33:29
回答 1查看 720关注 0票数 0

我试图用不同的和动态的高度做一个ListView.builder。我正在尝试创建一个可滚动的锻炼计划小部件列表视图。

我完成了大部分代码,现在我能够创建时间表并在ListView.builder中显示它们。问题是,目前每个项目的高度都是固定的,而不是其最小高度。正如您在下面的附件中所看到的。

这是我脚手架上的密码。

代码语言:javascript
运行
复制
SliverToBoxAdapter(
              child: Container(
                height: 850, // This is a temporary height, since i would like it to be dynamic.
                child: ListView.builder(
                
                  scrollDirection: Axis.horizontal,
                  itemCount: _ritornaSchedaDiAllenamento(size)[2], // The element at [2] is an int and it tells ListView.builder how many Items it must show
                  itemBuilder: (context, index) {
                    return _ritornaSchedaDiAllenamento(size)[0][index]; // This generate the widgets.
                  },
                ),
              ),
            ),

现在,这是返回Listview.builder显示的小部件的函数。

代码语言:javascript
运行
复制
            // This is the function that returns the Widgets that the Listview.builder shows.
            
            List _ritornaSchedaDiAllenamento(Size size) {
                    List<String> nomiDelleSchede = []; // This list contains the NAME of each workout schedule
                    List<Widget> schede = []; // This list contains workout schedules WIDGETS and SEPARATORS (basically SizedBox with given width)
                    int numerowidget = 0; // This int is the number of items Listview.builder has to create, it will update later.
            
                Color _coloreScheda(int indice) {
                  // This function assign a color to each workout schedule, based on the index (indice) of the Workout Schedule.
            
                  Color colore = Colors.white;
            
            
                  if (indice == 0) {
                    colore = Color(0xFF1a88ff);
                  } else if (indice == 1) {
                    colore = Color(0xFF29ccae);
                  } else if (indice == 2) {
                    colore = Color(0xffED254E);
                  }
            
                  if (indice > 2) {
                    if (indice % 3 == 0) {
                      colore = Color(0xFF1a88ff);
                    }
                    if (indice % 3 == 1) {
                      colore = Color(0xFF29ccae);
                    }
                    if (indice % 3 == 2) {
                      colore = Colors.black;
                    }
                  }
            
                  return colore;
                }
        
        // Now, i create the single workout schedule (scheda), at first it is only a container with
        // Text widget saying "No schedule found". 
        
                Widget scheda = Container(
                  child: Text("No schedule found"),
                );
        
        // So, how i generate the Workout Schedules Widgets? I look at the whole list of exercise 
        // (listaesercizi), if an exercise has the field .allenamentoNome, which is a String and 
        // also the Workout schedule name, with a name that is not present in "nomiDelleSchede" 
        // which contains every workout schedules names, then i add the name of that Schedule 
        // (.allenamentoNome) to the list of all schedules name (nomiDelleSchede).
            
                for (int i = 0; i < listaesercizi.length; i++) {
                  if (!nomiDelleSchede.contains(listaesercizi[i].allenamentoNome)) {
                    nomiDelleSchede.add(listaesercizi[i].allenamentoNome);
                  }
                }
            // Now, if nomiDelleSchede is not Empty, (basically if the user has created an exercise and it has assigned that exercise to a workout schedule named "Leg day", with the field .allenamentoNome), i create the single workout schedule widget (scheda).
    
    // Please note how "schede" is the list of widgets that containts each workout schedule widget (scheda) and separators. Meanwhile, "scheda" it's the single colored workout schedule widget. 
    
                if (nomiDelleSchede.isNotEmpty) {
                  schede.add(
                    SizedBox(
                      width: size.width * 0.10,
                    ),
                  );
                  for (int i = 0; i < nomiDelleSchede.length; i++) {
                    scheda = Container(
                      width: size.width * 0.80,
                      decoration: BoxDecoration(
                        color: _coloreScheda(
                            i), // I assign the color based on the index 'i'
                        borderRadius: BorderRadius.circular(29.5),
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Padding(
                            padding: EdgeInsets.only(top: 20, left: 20, right: 20),
                            child: Text(
                              nomiDelleSchede[i],
                              style: const TextStyle(
                                color: Colors.white,
                                overflow: TextOverflow.ellipsis,
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                          Container(
                            padding: const EdgeInsets.only(top: 20, left: 20, right: 40),
                            child: Row(
                              children: [
                                Expanded(
                                  flex: 60,
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Expanded(
                                        flex: 9,
                                        child: Container(
                                          alignment: Alignment.centerLeft,
                                          //  color: Colors.red,
                                          child: const FittedBox(
                                            fit: BoxFit.scaleDown,
                                            child: Text(
                                              'Esercizio',
                                              style: TextStyle(
                                                color: Colors.white,
                                                fontWeight: FontWeight.bold,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                      const Expanded(
                                        flex: 2,
                                        child: FittedBox(
                                          fit: BoxFit.scaleDown,
                                          child: Text(
                                            "S",
                                            style: TextStyle(
                                              color: Colors.white,
                                              fontWeight: FontWeight.bold,
                                            ),
                                          ),
                                        ),
                                      ),
                                      Expanded(
                                        flex: 2,
                                        child: Container(
                                          //  color: Colors.red,
                                          child: const FittedBox(
                                            fit: BoxFit.scaleDown,
                                            child: Text(
                                              "R",
                                              style: TextStyle(
                                                color: Colors.white,
                                                fontWeight: FontWeight.bold,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                      Expanded(
                                        flex: 2,
                                        child: Container(
                                          //  color: Colors.red,
                                          child: const FittedBox(
                                            fit: BoxFit.scaleDown,
                                            child: Icon(
                                              Icons.check_circle,
                                              //Icons.check_rounded,
                                              size: 22,
                                              color: Colors.white,
                                            ),
            
                                            // child: Text(
                                            //   "F",
                                            //   style: TextStyle(
                                            //     color: Colors.white,
                                            //     fontWeight: FontWeight.bold,
                                            //   ),
                                            // ),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                          AllenamentoLista(
                            listaesercizi: listaesercizi,
                            nomeScheda: nomiDelleSchede[i],
                            coloreprincipale: _coloreScheda(i),
                          ),
                          SizedBox(
                            height: 20,
                          ),
                        ],
                      ),
                    );

// Now i add the widget of the workout schedule to "schede" which contains every widget ListView.builder has to show (Each Workout Schedule Widget (scheda) and Separator (SizedBox)

                    schede.add(scheda);
            
                    // Adding 20 pixel of space between each workout schedule
                    if (i != nomiDelleSchede.length - 1) {
                      schede.add(
                        SizedBox(
                          width: 20,
                        ),
                      );
                    }
                  }
            
                  // After the last workout schedule i add some space in order to center the last // workout schedule
                  schede.add(
                    SizedBox(
                      width: size.width * 0.10,
                    ),
                  );
                }
            
                if (nomiDelleSchede.length != 0) {
                  numerowidget = schede.length;
                }
            
                return [schede, nomiDelleSchede, numerowidget];
              }

  [1]: https://imgur.com/a/I5I0bdY
EN

回答 1

Stack Overflow用户

发布于 2022-02-03 20:11:49

我找到解决问题的办法了!这个简单的方法有效!

代码语言:javascript
运行
复制
SliverToBoxAdapter(
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: _ritornaSchedaDiAllenamento(size)[0],
            ),
          ),
        ),
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70977252

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档