当前位置: 首页 > article >正文

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

在这里插入图片描述


http://www.kler.cn/a/551682.html

相关文章:

  • AI(人工智能)会给嵌入式领域带来哪些机遇与挑战?
  • golang常用库之-swaggo/swag根据注释生成接口文档
  • 电磁铁在生产与生活中的广泛应用
  • Ubuntu 24.04.1 LTS 本地部署 DeepSeek 私有化知识库
  • QT QLineEdit如何支持文件拖放
  • 项目2 数据可视化--- 第十五章 生成数据
  • 【开源免费】基于SpringBoot+Vue.JS个人博客系统(JAVA毕业设计)
  • 在Nodejs中使用kafka(四)消息批量发送,事务
  • Ollama 部署本地 Deepseek-R1 大模型及可视化聊天工具指南
  • springboot399-中文社区交流平台(源码+数据库+纯前后端分离+部署讲解等)
  • mapbox基础,使用geojson加载circle圆点图层
  • 汽车通信未来新趋势:Eclipse uProtocol
  • 无第三方依赖 go 语言工具库
  • 【复现DeepSeek-R1之Open R1实战】系列6:GRPO源码逐行深度解析(上)
  • 深入解析「卡顿帧堆栈」 | UWA GPM 2.0 技术细节与常见问题
  • 25工商管理研究生复试面试问题汇总 工商管理专业知识问题很全! 工商管理复试全流程攻略 工商管理考研复试真题汇总
  • 解决DeepSeek服务器繁忙的有效方法
  • vue3项目,商城系统
  • 网络工程师 (45)网际控制报文协议ICMP
  • 分布式储能监测云平台