我如何在 flutter 中创建这种类型的设计？

Question

当您选择一个容器时，我有一个要过滤的项目列表，当您select一个项目时，它应该带您一个不同的小部件，该小部件也有一个项目列表。

我将在下面给出一张图片以获得更好的说明。

我尝试在 pub.dev 中寻找可以帮助我更快实现这一目标但找不到的软件包。

我也尝试通过我的定制来实现这一点，但我无法做到。 :(

请我需要答案。 谢谢！

Answer 1

我认为这个 package 将帮助您实现这一目标： https://pub.dev/packages/buttons_tabbar

Answer 2

使用FilterChip小部件和ListView小部件（水平）。

Answer 3

使用ChoiceChip()我还假设选择芯片中的数据文本来自某种后端

...
 var _value = 0;
  String chipCatId = "";
  bool isChipSelected = false;
...
 child:ListView.builder(
                                  scrollDirection: Axis.horizontal,
                                  shrinkWrap: true,
                                  itemCount:
                                      snapshot.data!.data!.children!.length,
                                  itemBuilder: (context, index) {
                                    return Padding(
                                      padding: const EdgeInsets.symmetric(
                                          horizontal: 2.0),
                                      child: ChoiceChip(
                                          backgroundColor:
                                              AppColors.dullThemeColor,
                                          label: Text(
                                            index == 0
                                                ? "All"
                                                : snapshot.data!.data!
                                                    .children![index - 1].name
                                                    .toString(),
                                            style: const TextStyle(
                                              color: AppColors.whiteThemeColor,
                                            ),
                                          ),
                                          selected: _value == index,
                                          pressElevation: 20,
                                          elevation: 2.0,
                                          selectedColor:
                                              AppColors.secondaryThemeColor,
                                          onSelected: (bool selected) {
                                            setState(() {
                                              chipCatId = snapshot.data!.data!
                                                  .children![index - 1].id
                                                  .toString();
                                              isChipSelected = selected;
                                              _value =
                                                  (selected ? index : null)!;
                                              _onRefresh();
                                            });
                                          }),
                                    );
                                  },
                                );

Answer 4

你可以简单地喜欢这样

    List<String> all = ["All", "Message", "Jobs"];
        
    Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: List.generate(
      all.length,
      (index) => Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          decoration: BoxDecoration(
              color: Colors.grey.withOpacity(0.5),
              borderRadius: const BorderRadius.all(
                  Radius.circular(20))),
          child: Padding(
            padding: const EdgeInsets.symmetric(
                horizontal: 12, vertical: 8),
            child: Text(
              all[index],
              style: Theme.of(context)
                  .textTheme
                  .subtitle2
                  ?.copyWith(
                    color: AppTheme.grey1,
                    fontWeight: FontWeight.normal,
                  ),
            ),
          ),
        ),
      ),
    ), 
)

Output：