Flutter MaterialApp：如何将AppBar标题设置为可点击链接

没问题，咱们直接来改就行～你只需要修改MyHomePage里的AppBar标题部分，把原来的普通Text组件换成带点击事件的组件就好，下面给你两种常用的实现方式：

方式一：用InkWell（带Material水波纹效果） #

这是最贴合Material风格的做法，点击时会出现水波纹反馈，很适合AppBar场景：

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 替换原来的Text为可点击的InkWell包裹的文本
        title: InkWell(
          onTap: () {
            // 这里写点击标题后的逻辑，比如内部跳转或者打印日志
            print("AppBar标题被点击啦！");
            // 如果要跳转到其他页面，用Navigator就行：
            // Navigator.push(context, MaterialPageRoute(builder: (ctx) => const OtherPage()));
          },
          child: Text(
            widget.title,
            style: const TextStyle(
              color: Colors.white,
              decoration: TextDecoration.underline, // 加下划线模拟链接样式
            ),
          ),
        ),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '0',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

方式二：用TextButton（按钮样式） #

如果你想要更像按钮的交互感，可以用TextButton，记得去掉它的默认内边距，避免标题位置偏移：

appBar: AppBar(
  title: TextButton(
    onPressed: () {
      // 点击逻辑
      print("标题按钮被触发！");
    },
    style: TextButton.styleFrom(
      padding: EdgeInsets.zero, // 移除默认内边距，让标题贴合AppBar
    ),
    child: Text(
      widget.title,
      style: const TextStyle(color: Colors.white),
    ),
  ),
  backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),

补充说明 #

• 你提供的MyApp部分代码完全不用修改，只需要调整MyHomePage的AppBar标题即可。
• 如果需要打开外部网页，可以引入url_launcher包来实现，不过如果是APP内部跳转，用Navigator就足够啦。

内容的提问来源于stack exchange，提问作者Donat Treszler