首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在Scaffold中向AppBar添加子标题

在Scaffold中向AppBar添加子标题
EN

Stack Overflow用户
提问于 2020-10-28 07:52:51
回答 1查看 327关注 0票数 0

在我的颤音应用程序中,我有具有搜索功能的页面。它给我带来了一些数据从API服务器与集团模式的实现。现在我需要添加文字“最近的搜索”的副标题。当试图添加它时,覆盖我的“输入文本到搜索”文本。我不能将它添加到屏幕的顶部和左边的appbar下面,这是我的当前阶段:

我想补充的是:

代码语言:javascript
运行
复制
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');
        },
      ),
    ),
  ),
);
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-28 08:03:06

您可以使用bottom属性AppBar

码样例

代码语言:javascript
运行
复制
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Title'),
          bottom: PreferredSize(
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text('Bottom text'),
              ),
              preferredSize: Size.fromHeight(12.0)),
        ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

在DartPad上试一试

截图

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64568563

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档