Flutter 3.29.0 新特性 CupertinoNavigationBar 可配置bottom属性

发布于:2025-02-19 ⋅ 阅读:(25) ⋅ 点赞:(0)

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);
}

在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到