重新组织小部件- Flutter

iqxoj9l9 于 2022-11-25 发布在 Flutter

关注(0)|答案(1)|浏览(137)

所以我尝试在（task.title）下添加一个描述，但是根据我目前编写的代码，我不确定如何重构它，甚至改进它才能做到这一点。我还希望有一些小部件，可以在每个任务磁贴之间留出一些空间，这样就不会太拥挤了。任何帮助都是感激的。谢谢。
任务_平铺.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);
      },
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/74555863/reorganize-the-widgets-flutter

1条答案

按热度按时间

kmb7vmvb1#

我现在明白了，我已经编辑了你以前的代码，以纳入你所需要的变化，尝试这样做：

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
      ],
    );
  }
}

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

赞(0）回复(0）举报 2022-11-25

我来回答

重新组织小部件- Flutter

1条答案

相关问题

热门标签

最新问答