重组小部件 - Flutter答案

【问题标题】：Reorganize the widgets - Flutter重组小部件 - Flutter
【发布时间】：2022-11-24 13:29:47
【问题描述】：

所以我试图在 (task.title) 下添加描述，但是使用我编写的当前代码，我不确定如何重构它甚至改进它才能做到这一点。我还希望有某种小部件可以在每个任务块之间留出一些空间，这样就不会太拥挤。任何帮助表示赞赏。谢谢你。

task_tile.dart

class TaskTile extends StatelessWidget {
  const TaskTile({
    Key? key,
    required this.task,
  }) : super(key: key);

  final Task task;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Row(
            children: [
              Expanded(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(width: 10),
                    Text(
                      task.title,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: const Color(0xFF89ABE3),
                        fontFamily: 'Source Sans Pro',
                        fontSize: 19,
                        decoration:
                            task.isDone! ? TextDecoration.lineThrough : null,
                      ),
                    ),
                    const SizedBox(width: 10),
                  ],
                ),
              ),
            ],
          ),
        ),
        Row(
          children: [
            PopupMenu(
              favouriteCallback: () => context.read<TasksBloc>().add(
                    MakeFavouriteTask(task: task),
                  ),
              task: task,
            ),
            Transform.scale(
              scale: 1.2,
              child: Checkbox(
                shape: const CircleBorder(
                  side: BorderSide(
                    width: 20,
                  ),
                ),
                side: const BorderSide(
                  color: Color(0xFF89ABE3),
                ),
                activeColor: Colors.greenAccent,
                value: task.isDone,
                onChanged: task.isDeleted == false
                    ? (value) {
                        context.read<TasksBloc>().add(UpdateTask(task: task));
                      }
                    : null,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

任务列表.dart

class TasksList extends StatelessWidget {
  const TasksList({
    Key? key,
    required this.tasksList,
  }) : super(key: key);

  final List tasksList;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.only(top: 10),
      itemCount: tasksList.length,
      itemBuilder: (context, index) {
        var task = tasksList[index];
        return TaskTile(task: task);
      },
    );
  }
}

【问题讨论】：

你也可以分享当前 ui 的屏幕截图吗，因为我无法在我这边复制相同的代码
@RisheekMittal 是的
你也不能只在你的 task.title 小部件和 SizedBox 周围包裹一个 Column 来增加间距吗？
@RisheekMittal 它会和 ListTile 中的字幕一样吗？
而且，我想要一些东西来划分它们，而不仅仅是在它们之间添加小空间。

标签： flutter dart

【解决方案1】：

我现在明白了，我已经编辑了您以前的代码以合并您需要的更改，试试这个：

class TaskTile extends StatelessWidget {
  const TaskTile({
    Key? key,
    required this.task,
  }) : super(key: key);

  final Task task;

  @override
  Widget build(BuildContext context) {
    return Column(// wrap the whole widget in a Column
      children: [
        const SizedBox(width: 4), //add a sizedbox for spacing
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const SizedBox(width: 10),
                        Column( //one column is needed here
                          children: [
                            Text(
                              task.title,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                color: const Color(0xFF89ABE3),
                                fontFamily: 'Source Sans Pro',
                                fontSize: 19,
                                decoration: task.isDone!
                                    ? TextDecoration.lineThrough
                                    : null,
                              ),
                            ), // you can also add a SizedBox here to keep spacing if they're too close
                            Text( // and this is your desciption part
                              task.description,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                color: const Color(0xFF89ABE3),
                              ),
                            ),
                          ],
                        ),
                        const SizedBox(width: 10),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Row(
              children: [
                PopupMenu(
                  favouriteCallback: () => context.read<TasksBloc>().add(
                        MakeFavouriteTask(task: task),
                      ),
                  task: task,
                ),
                Transform.scale(
                  scale: 1.2,
                  child: Checkbox(
                    shape: const CircleBorder(
                      side: BorderSide(
                        width: 20,
                      ),
                    ),
                    side: const BorderSide(
                      color: Color(0xFF89ABE3),
                    ),
                    activeColor: Colors.greenAccent,
                    value: task.isDone,
                    onChanged: task.isDeleted == false
                        ? (value) {
                            context.read<TasksBloc>().add(UpdateTask(task: task));
                          }
                        : null,
                  ),
                ),
              ],
            ),
          ],
        ),
        const SizedBox(width: 4),//add a sizedbox for spacing
        Divider(thickness: 2,),// the divider you want to keep the tiles apart
      ],
    );
  }
}

希望这能回答你所有的问题......

【讨论】：