Flutter/Material 设计：如何添加 "quick search buttons"

Question

我正在尝试将“快速搜索按钮”添加到我的 flutter 应用程序中，例如（红色）：

我不确定这是否是 material 设计组件 - 如果是，我希望确定名称以便我可以，例如搜索 https://pub.dev/ 现有小部件。

有谁知道这个 material 设计组件叫什么（如果适用）？
我如何实现 it/does 现有的小部件存在于例如https://pub.dev/?

非常感谢！ :)

Answer 1

那些叫做芯片，参考这个页面https://material.io/components/chips。还有一节介绍如何在flutter中实现这些。

Answer 2

您可以使用 FilterChip 小部件来实现“快速搜索按钮” https://api.flutter.dev/flutter/material/FilterChip-class.html

或者您也可以创建自定义小部件来实现此目的UI

import 'package:flutter/material.dart';

class MyFilterChip extends StatefulWidget {
  const MyFilterChip({Key? key}) : super(key: key);

  @override
  State<MyFilterChip> createState() => _MyFilterChipState();
}

class _MyFilterChipState extends State<MyFilterChip> {
  List fruits = ['apple', 'banana', 'mango', 'papaya', 'orange', 'guava'];
  int selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(15),
            child: SizedBox(
              height: 30,
              child: ListView.separated(
                itemCount: fruits.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) => FilterChip(
                  label: Text(fruits[index]),
                  selected: index == selectedIndex,
                  onSelected: (value) {
                    setState(() {
                      selectedIndex = index;
                    });
                  },
                ),
                separatorBuilder: (BuildContext context, int index) =>
                    const SizedBox(
                  width: 10,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Flutter/Material 设计：如何添加 "quick search buttons"

Flutter/Material Design: How to add "quick search buttons"

android

widget

ios

material-design

flutter