Flutter怎么自定義導航條

在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'),
  ),
);

通過這種方式，你可以自定義導航條的標題和右側操作按鈕，并在頁面中使用自定義的導航條。