Flutter Searchdelegate，我想在单击搜索时添加背景颜色和应用栏颜色

问题描述 投票：0回答：4

我可以在家里更改我的背景颜色和应用程序栏，但是当我单击使用搜索委托的搜索图标时，它全部变回白色，我该如何更改颜色？只是为了说清楚，所以在用户单击搜索图标之前，背景和应用程序栏是黑色的，但当他们单击它时，它变成白色，我该如何更改它？

这是搜索代码：

import 'package:flutter/material.dart';
import 'package:movie_app_3/model/movie_response.dart';
import 'package:movie_app_3/screens/movie_detail_screen/movie_detail_screen.dart';

import '../model/movie.dart';
import '../repository/repository.dart';

class DataSearch extends SearchDelegate {
  // void initState() {
  //   searchBloc..getSearch(query);
  // }
  final movieRepo = MovieRepository();
  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () => query = '',
      )
    ];
  }

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

  @override
  Widget buildResults(BuildContext context) {
    return Container();
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    if (query.isEmpty) return Container();

    return FutureBuilder<MovieResponse>(
      future: movieRepo.getSearch(query),
      builder: (BuildContext context, AsyncSnapshot<MovieResponse> snapshot) {
        if (snapshot.hasData) {
          if (snapshot.data.error != null && snapshot.data.error.length > 0) {
            return _buildErrorWidget(snapshot.data.error);
          }
          return _buildHomeWidget(snapshot.data);
        } else if (snapshot.hasError) {
          return _buildErrorWidget(snapshot.error);
        } else {
          return _buildLoadingWidget();
        }
      },
    );
  }

  Widget _buildHomeWidget(MovieResponse data) {
    List<Movie> movies = data.movies;
    return ListView.builder(
      itemCount: movies.length,
      itemBuilder: (context, index) {
        return ListTile(
          leading: FadeInImage(
              image: movies[index].poster == null
                  ? AssetImage('assets/images/no-image.jpg')
                  : NetworkImage("https://image.tmdb.org/t/p/w200/" +
                      movies[index].poster),
              placeholder: AssetImage('assets/images/no-image.jpg'),
              width: 50.0,
              fit: BoxFit.contain),
          title: Text(
            movies[index].title,
            style: TextStyle(fontFamily: 'Poppins'),
          ),
          subtitle: Text(
            movies[index].overview,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontFamily: 'Raleway'),
          ),
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => MovieDetailScreen(movie: movies[index]),
              ),
            );
          },
        );
      },
    );
  }

  Widget _buildLoadingWidget() {
    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          height: 25.0,
          width: 25.0,
          child: CircularProgressIndicator(
            valueColor: new AlwaysStoppedAnimation<Color>(Colors.black),
            strokeWidth: 4.0,
          ),
        )
      ],
    ));
  }

  Widget _buildErrorWidget(String error) {
    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("Error occured: $error"),
      ],
    ));
  }
  // @override
  // Widget buildSuggestions(BuildContext context) {
  //   final suggestedList = (query.isEmpty) ?
  //                         recentMovies :
  //                         movies.where((movie) => movie.toLowerCase().contains(query.toLowerCase())).toList();

  //   return ListView.builder(
  //     itemCount: suggestedList.length,
  //     itemBuilder: (context, i) {
  //       return ListTile(
  //         leading: Icon(Icons.movie),
  //         title: Text(suggestedList[i]),
  //         onTap: () {},
  //       );
  //     },
  //   );
  // }

}

这是家庭密码：

import 'package:flutter/material.dart';

import 'package:movie_app_3/widget/drawer.dart';
import 'package:movie_app_3/screens/home_screen/widget/home_screen1.dart';
import 'package:movie_app_3/screens/home_screen/widget/home_screen2.dart';
import 'package:movie_app_3/widget/search.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 2);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.black,
            Color(0xff112339),
            Colors.black,
          ],
        ),
      ),
      child: DefaultTabController(
        length: 2,
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            elevation: 0,
            title: Text(
              'Moviez',
              style: TextStyle(
                fontSize: 24,
                color: Colors.white,
                fontFamily: 'Poppins',
              ),
            ),
            backgroundColor: Colors.transparent,
            centerTitle: true,
            actions: [
              Padding(
                padding: EdgeInsets.only(right: 20),
                child: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: () {
                    showSearch(context: context, delegate: DataSearch());
                  },
                ),
              ),
            ],
            bottom: TabBar(
              controller: _tabController,
              indicatorColor: Colors.white,
              indicatorSize: TabBarIndicatorSize.tab,
              indicatorWeight: 2.0,
              tabs: [
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8.0),
                  child: Text(
                    'Discover',
                    style: TextStyle(fontSize: 16, fontFamily: 'Raleway'),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8.0),
                  child: Text(
                    'Genres',
                    style: TextStyle(fontSize: 16, fontFamily: 'Raleway'),
                  ),
                ),
              ],
            ),
          ),
          drawer: MyDrawer(),
          body: TabBarView(
            controller: _tabController,
            children: <Widget>[
              FirstTab(),
              SecondTab(),
            ],
          ),
        ),
      ),
    );
  }
}
flutter
4个回答
4
投票

将其添加到您的“DataSearch”类中

class _SearchDelegate extends SearchDelegate {

  @override
  ThemeData appBarTheme(BuildContext context) {
    return Theme.of(context).copyWith(
      scaffoldBackgroundColor: Colors.green,
    );
  }
3
投票

要自定义搜索委托，您必须重写名为 appBarTheme 的方法，然后在其上设置自定义主题。

** 注意：当您覆盖 SearchDelegate 的 appBarTheme 时，您必须自己自定义与 SearchBar 相关的所有内容。就像下面的代码一样。 **

执行此操作可更改 AppBar 颜色：

@override
ThemeData appBarTheme(BuildContext context) {
   return ThemeData(
   appBarTheme: const AppBarTheme(
    color: MyColors.mainColor, // affects AppBar's background color
    hintColor: Colors.grey, // affects the initial 'Search' text
    textTheme: const TextTheme(
      headline6: TextStyle( // headline 6 affects the query text
          color: Colors.white,
          fontSize: 16.0,
          fontWeight: FontWeight.bold)),
   ),
  );   
}

以及更改背景颜色的建议：

@override
Widget buildSuggestions(BuildContext context) {

  return Container(
     color: Colors.black,
     ...
  );
}

同样执行此操作以获得结果：

@override
Widget buildResults(BuildContext context) {
  
  return Container(
     color: Colors.black,
     ...
  );
}

希望这有帮助。

1
投票

如果您已经设置了 MaterialApp 主题，您可以简单地使用 Theme.of(context).copywith 来保留主体主题。然后您可以覆盖 appBarTheme 来更改所需的颜色/样式。

 @override    
    ThemeData appBarTheme(BuildContext context) {
        return Theme.of(context).copyWith(
          //scaffoldBackgroundColor: , to change scaffold color
          appBarTheme: const AppBarTheme( //to change appbar
              color: Colors.black,
              //titleTextStyle: , to change title text
              //toolbarTextStyle: , to change toolbar text style
        ),
        );
0
投票

我的SearchDelegate在默认的“搜索”中有Word，但我想把这个地方写成“我是搜索”

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.