如何使用gridview在checkboxlisttile的右侧底部编码int文本

Question

我有一个关于 checkboxListTile 与 gridview 对齐的问题。

如何使用 gridview 在 checkboxListTile 的左侧底部编写 int 文本。

也许我认为那是“次要的”，但我不确定..

这是我的代码

return GridView.count(
                primary: false,
                crossAxisCount: 2,
                padding: const EdgeInsets.all(20),
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                children: workoutList
                                .map(
                            (workout) => Material(
                              color: Colors.teal[400],
                              child: CheckboxListTile(
                                  title:
                                  Text(
                                    workout.title,
                                    style: TextStyle(fontSize: 14),
                                  ),
                                  value: workout.isDone,
                                  onChanged: (bool value) {
                                  workout.isDone = !workout.isDone;
                                  model.reload();
                                  },
                              ),
                            ),

                            )
                                .toList(),
                );

Answer 1

我将您的代码编辑为如下所示：

return GridView.count(
                primary: false,
                crossAxisCount: 2,
                padding: const EdgeInsets.all(20),
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                children: workoutList
                                .map(
                            (workout) => Material(
                              color: Colors.teal[400],
                              child: Column(
                                 children: <Widget>[
                                     CheckboxListTile(
                                  title:
                                  Text(
                                    workout.title,
                                    style: TextStyle(fontSize: 14),
                                  ),
                                  value: workout.isDone,
                                  onChanged: (bool value) {
                                  workout.isDone = !workout.isDone;
                                  model.reload();
                                  },
                              ),
                                    Align(
                                    alignment: Alignment.bottomRight,
                                     child: Text("count"),
                                       ),
                                  ],
                              ),
                            ),

                            )
                                .toList(),
                );

通过使用 Align 小部件，我们可以将 Text 小部件与右下角对齐