如何制作一个垂直和水平动态滚动的checkboxlisttile？

Question

如何制作这样的UI？

复选框数据列表是使用 Column Children List.generate() 动态生成的。
问题是当数据文本名称像这样溢出时。我想让它滚动到水平而不是每个项目列表。当滚动到水平时，所有数据也会滚动。

我的代码：

import 'package:flutter/material.dart';
import 'package:qhse_auto/common_ui/button/OutlineButtonTextOnly.dart';
import 'package:qhse_auto/common_ui/button/PrimaryButtonTextOnly.dart';
import 'package:qhse_auto/common_ui/empty_padding.dart';
import 'package:qhse_auto/common_ui/widgets/common_search_filter.dart';
import 'package:qhse_auto/common_ui/widgets/common_textfield.dart';

class PopupSelectUserWidget extends StatefulWidget {
  const PopupSelectUserWidget({super.key});

  @override
  State<PopupSelectUserWidget> createState() => _PopupSelectUserWidgetState();
}

class _PopupSelectUserWidgetState extends State<PopupSelectUserWidget> {
  bool isCheck = false;
  final List<int> shades = [100, 200, 300, 400, 500, 600, 700, 800, 900];
  final ScrollController _horizontal = ScrollController(),
      _vertical = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(left: 24, top: 20, right: 24, bottom: 16),
      child: Wrap(
        children: [
          Container(
            width: double.infinity,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              border: Border.all(
                color: Colors.grey,
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(12),
              child: Column(
                children: [
                  const CommonTextField(
                    hint: 'Search NIK, Nama, Departemen, Jabatan',
                  ),
                  12.ph,
                  Container(
                    padding: const EdgeInsets.only(
                      left: 12,
                      right: 12,
                      top: 12,
                      bottom: 12,
                    ),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(4),
                        border: Border.all(
                          color: const Color(0XFF7F8895).withOpacity(0.30),
                        )),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Text(
                          'Anggota Team',
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        const Divider(
                          color: Color(0XFFE1E1E1),
                          thickness: 1.5,
                        ),
                        12.ph,
                        SizedBox(
                          height: MediaQuery.sizeOf(context).height / 2.5,
                          width: double.infinity,
                          child: Scrollbar(
                            controller: _vertical,
                            child: SingleChildScrollView(
                              controller: _vertical,
                              child: Scrollbar(
                                controller: _horizontal,
                                thumbVisibility: true,
                                trackVisibility: true,
                                notificationPredicate: (notif) =>
                                    notif.depth == 1,
                                child: SingleChildScrollView(
                                  controller: _horizontal,
                                  child: Column(
                                    children: List.generate(40, (index) {
                                      return CheckboxListTile(
                                        value: isCheck,
                                        onChanged: (value) {
                                          setState(() {
                                            isCheck = value!;
                                          });
                                        },
                                        title: Row(
                                          children: [
                                            const CircleAvatar(
                                              backgroundImage: AssetImage(
                                                  'assets/images/ilham.jpeg'),
                                            ),
                                            4.pw,
                                            RichText(
                                              text: const TextSpan(
                                                text: 'Ristu Aji W',
                                                style: TextStyle(
                                                  color: Colors.black,
                                                  fontSize: 16,
                                                  fontWeight: FontWeight.w500,
                                                ),
                                                children: [
                                                  TextSpan(
                                                    text: '\n19786',
                                                    style: TextStyle(
                                                      color: Color(0XFF7F8895),
                                                      fontSize: 16,
                                                      fontWeight:
                                                          FontWeight.w500,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                            24.pw,
                                            RichText(
                                              overflow: TextOverflow.ellipsis,
                                              text: const TextSpan(
                                                text: 'Operation',
                                                style: TextStyle(
                                                  color: Colors.black,
                                                  fontSize: 16,
                                                  fontWeight: FontWeight.w500,
                                                ),
                                                children: [
                                                  TextSpan(
                                                    text:
                                                        '\nMobile Developersdsdsdsdsdsds',
                                                    style: TextStyle(
                                                      color: Color(0XFF7F8895),
                                                      fontSize: 16,
                                                      fontWeight:
                                                          FontWeight.w500,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ],
                                        ),
                                      );
                                    }),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 16),
                    child: Row(
                      children: [
                        Expanded(
                          child: OutlineButtonText(
                            onTap: () {
                              Navigator.pop(context);
                            },
                            label: 'Cancel',
                          ),
                        ),
                        const SizedBox(width: 16),
                        Expanded(
                          child: PrimaryButtonTextOnly(
                            onTap: () {
                              // goNext(context);
                            },
                            label: 'Next',
                            isActive: true,
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

我希望数据可以一起滚动到水平和垂直

Answer 1

我检查了您可以给出的代码，有一些步骤需要重点关注。您需要使用水平滚动控制器将 CheckboxListTile 小部件行包装在 SingleChildScrollView 内。具体方法如下：

1. 删除外部 SingleChildScrollView 小部件。

2. 将 CheckboxListTile 小部件行包裹在 带有水平滚动控制器的 SingleChildScrollView。

3. 添加一个ScrollController用于水平滚动并将其传递给 SingleChildScrollView。

我认为这个代码片段适合你。

child: Scrollbar(
                      controller: _horizontal, // Add horizontal scroll controller
                      child: SingleChildScrollView(
                        controller: _horizontal, // Pass the controller to SingleChildScrollView
                        scrollDirection: Axis.horizontal, // Set horizontal scrolling
                        child: SingleChildScrollView(
                          child: Column(
                            children: List.generate(40, (index) {
                              return CheckboxListTile(