[英]Adding Sub Title to AppBar in Scaffold
在我的 flutter 應用程序中,我有一個帶有搜索功能的頁面。 它從帶有塊模式實現的 API 服務器給我帶來了一些數據。 現在我需要添加帶有文本“最近搜索”的子標題。 在嘗試添加它時,它會覆蓋我的“輸入要搜索的文本”文本。 我無法將它添加到屏幕頂部和左側的 appbar 下面這是我當前的階段:
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(),
),
),
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.