将副标题添加到Scaffold中的AppBar

问题描述

在我的Flutter应用程序中，我的页面具有搜索功能。它从我的API服务器获得了一些数据，这些数据是通过Bloc模式实现的。 现在，我需要添加带有文本“最近搜索”的副标题。尝试添加时，它覆盖了我的“输入要搜索的文本”文本。我无法将其添加到屏幕顶部和左侧的应用栏下方 这是我目前的阶段：

那就是我想补充的：

AppBar _appBar() {
  return AppBar(
   iconTheme: IconThemeData(
    color: Colors.white.withOpacity(0.8),),title: TextField(
    onChanged: _textInputListener.add,autofocus: true,controller: _textInputController,key: Key('searchscreen_input_tf_id'),keyboardType: TextInputType.text,decoration: Inputdecoration(
      hintText: AppTranslations.of(context).text("enter_text_to_search"),border: InputBorder.none,actions: <Widget>[
    IconButton(
      key: Key('searchscreen_clear_ib_id'),icon: const Icon(
        Icons.clear,onpressed: () {
        if (_textInputController.text.isNotEmpty) {
          _textInputController.clear();
          _textInputListener.add("");
        }
      },)
  ],);
}


Widget build(BuildContext context) {
 return Container(
  color: Color(0xFF131E42),child: SafeArea(
    child: Scaffold(
      resizetoAvoidBottomPadding: false,appBar: _appBar(),body: BlocBuilder(
        bloc: _searchScreenBloc,builder: (_,SearchScreenState state) {
          if (state is InitialSearchScreenState) {
            _searchScreenBloc.add(LoadRecent());
            return _containerWithPaddings(child: CircularProgressIndicator());
          }
          if (state is SearchScreenRecentState) {
            return _recentList(state.securities);
          }
          if (state is SearchScreenLoadingDataState) {
            return _containerWithPaddings(child: CircularProgressIndicator());
          }
          if (state is SearchScreenLoadedDataState) {
            return _loadedList(state.securities);
          }
          if (state is SearchScreenErrorState) {
            _searchScreenBloc.add(LoadSearchResult(securityName: _textInputController.text));
            return _containerWithPaddings(child: CircularProgressIndicator());
          }
          if (state is SearchScreennoresultsstate) {
            return _containerWithPaddings(
                child: Text(
              AppTranslations.of(context).text("no_results"),style: TextStyle(
                fontSize: 18.0,color: Colors.white,));
          }

          throw ArgumentError('$state not in cases');
        },);
}

解决方法

您可以使用bottom的{​​{1}}属性。

代码示例

AppBar

Try it on DartPad

屏幕截图