Flutter怎么自定义导航条-开发者知识库平台

Flutter怎么自定义导航条

Flutter

1665

2024/3/19 18:59:44

栏目: 编程语言

在Flutter中，可以通过自定义AppBar来实现自定义导航条。

首先，创建一个新的StatefulWidget类来定义自定义导航条：

import 'package:flutter/material.dart';

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final List<Widget> actions;

  CustomAppBar({required this.title, this.actions = const []});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
      actions: actions,
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

然后，在你的页面中使用CustomAppBar来替代默认的AppBar：

Scaffold(
  appBar: CustomAppBar(title: 'Custom Navigation Bar', actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // Handle search action
      },
    ),
    IconButton(
      icon: Icon(Icons.settings),
      onPressed: () {
        // Handle settings action
      },
    ),
  ]),
  body: Center(
    child: Text('Custom Navigation Bar Example'),
  ),
);

通过这种方式，你可以自定义导航条的标题和右侧操作按钮，并在页面中使用自定义的导航条。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

Flutter怎么自定义导航条

最新知识库

相关标签