在 Scaffold 中为 AppBar 添加子标题
Adding Sub Title to AppBar in Scaffold
在我的 flutter 应用程序中,我有一个具有搜索功能的页面。它通过 bloc 模式实现从 API 服务器给我带来了一些数据。
现在我需要添加带有文本“最近搜索”的子标题。在尝试添加它时,它覆盖了我的“输入要搜索的文本”文本。我无法将其添加到屏幕顶部和左侧的应用栏下方
这是我现在的阶段:
那就是我要补充的:
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');
},
),
),
),
);
}
您可以使用 AppBar
的 bottom
属性。
代码示例
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(),
),
),
);
}
}
截图
在我的 flutter 应用程序中,我有一个具有搜索功能的页面。它通过 bloc 模式实现从 API 服务器给我带来了一些数据。 现在我需要添加带有文本“最近搜索”的子标题。在尝试添加它时,它覆盖了我的“输入要搜索的文本”文本。我无法将其添加到屏幕顶部和左侧的应用栏下方 这是我现在的阶段:
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');
},
),
),
),
);
}
您可以使用 AppBar
的 bottom
属性。
代码示例
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(),
),
),
);
}
}
截图