Flutter 3.29.0 新特性 CupertinoNavigationBar 可配置bottom属性
Flutter 3.29版本优化了开发流程并提升了性能,对 Impeller、Cupertino、DevTools 等进行了更新。
CupertinoNavigationBar和CupertinoSliverNavigationBar现在接受底部小部件,通常是搜索字段或分段控件。
例如本小节内容就是放置了一个输入框(当然也是官方的Demo):
class NavBarExample extends StatefulWidget {
const NavBarExample({super.key});
State<NavBarExample> createState() => _NavBarExampleState();
}
class _NavBarExampleState extends State<NavBarExample> {
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text('CupertinoNavigationBar Sample'),
//核心在这里
bottom: _NavigationBarSearchField(),
automaticBackgroundVisibility: false,
),
child: Column(
children: <Widget>[
Container(height: 50, color: CupertinoColors.systemRed),
Container(height: 50, color: CupertinoColors.systemGreen),
Container(height: 50, color: CupertinoColors.systemBlue),
Container(height: 50, color: CupertinoColors.systemYellow),
],
),
);
}
}
_NavigationBarSearchField 的定义如下:
class _NavigationBarSearchField extends StatelessWidget
implements PreferredSizeWidget {
const _NavigationBarSearchField();
static const double padding = 8.0;
static const double searchFieldHeight = 35.0;
Widget build(BuildContext context) {
return const Padding(
padding: EdgeInsets.symmetric(horizontal: padding, vertical: padding),
child: SizedBox(
height: searchFieldHeight,
child: CupertinoSearchTextField(),
),
);
}
Size get preferredSize =>
const Size.fromHeight(searchFieldHeight + padding * 2);
}