Flutter：有没有办法在颤动中改变 SearchDelegate 搜索栏的高度答案

【问题标题】：Flutter: Is there a way to change SearchDelegate search bar height in flutterFlutter：有没有办法在颤动中改变 SearchDelegate 搜索栏的高度
【发布时间】：2021-05-14 12:20:55
【问题描述】：

我正在做一个应用程序，在我的整个应用程序中，我使用了一个自定义高度的自定义 AppBar (My project AppBar)，但我需要在其中创建一个搜索功能，我正在使用已经有一个 SearchDelegate可自定义的 SearchBar (Flutter SearchBar) 但我找不到一种方法来自定义它的高度而不更改它的颤振代码。

这是我的 SearchDelegate 代码。

class ProjectSearch extends SearchDelegate {
  @override
  get searchFieldStyle => TextStyle();

  @override
  get searchFieldLabel => 'Pesquisar';

  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(
          Icons.clear,
          size: 24.h,
        ), 
        onPressed: () {
          query = '';
        }
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: AnimatedIcon(
        icon: AnimatedIcons.menu_arrow,
        progress: transitionAnimation,
      ),
      onPressed: () {
        close(context, null);
      }
    );
  }

  @override
  // ignore: missing_return
  Widget buildResults(BuildContext context) {
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return FutureBuilder(
      future: ProjectsRepository().fetchAllProjects(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        List<Project> projects = List<Project>();
        if (snapshot.hasData) {
          projects = snapshot.data;
        } else {
          return Center(
            child:CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation(Theme.of(context).colorScheme.secondary),
            )
          );
        }

        projects = projects.where((p) => p.name.toLowerCase().startsWith(query.toLowerCase())).toList();

        return ListView.builder(
          itemBuilder: (context, index) => ListTile(
            leading: Icon(Icons.location_city_outlined),
            title: RichText(
              text: TextSpan(
                text: projects[index].name.substring(0, query.length),
                style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold
                ),
                children: [
                  TextSpan(
                    text: projects[index].name.substring(query.length),
                    style: TextStyle(
                      color: Colors.grey,
                    )
                  )
                ]
              )
            ),
            onTap: () async {
              
            },
          ),
          itemCount: projects.length,
        );
      
      });
  }
}

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您可以通过覆盖SearchDelegate 类的appBarTheme 方法来做到这一点：

  @override
  ThemeData appBarTheme(BuildContext context) {
    final theme = Theme.of(context);
    return theme.copyWith(
      appBarTheme: theme.appBarTheme.copyWith(toolbarHeight: YOUR_HEIGHT),
    );
  }

或者，如果您想为您的所有应用定义一次此高度，您可以provide a ThemeData to the MaterialApp constructor。例如

MaterialApp(
  ...
  theme: ThemeData(
    ...
    appBarTheme: const AppBarTheme(
      toolbarHeight: kToolbarHeight + 16,
    ),
  ),
);

【讨论】：