我试图用不同的和动态的高度做一个ListView.builder
。我正在尝试创建一个可滚动的锻炼计划小部件列表视图。
我完成了大部分代码,现在我能够创建时间表并在ListView.builder中显示它们。问题是,目前每个项目的高度都是固定的,而不是其最小高度。正如您在下面的附件中所看到的。
这是我脚手架上的密码。
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显示的小部件的函数。
// 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
发布于 2022-02-03 20:11:49
我找到解决问题的办法了!这个简单的方法有效!
SliverToBoxAdapter(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: _ritornaSchedaDiAllenamento(size)[0],
),
),
),
https://stackoverflow.com/questions/70977252
复制相似问题