flutter:: 我有一个关于如何使用应用顶部栏的问题

Question

这次我在 flutter 中制作了一个应用程序顶部栏。 我写了这样的代码。

import 'package:flutter/material.dart';

class VideoAppBar extends StatelessWidget{
  const VideoAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context){
    return SafeArea(
      child: Scaffold(
        body: WillPopScope( // <- wraps only the Scaffold body.
          child: Center(
          ),
          onWillPop: () {

            return Future(() => false);
          },
        ),
        appBar: AppBar(

          backgroundColor: Colors.white,
          title: Text('Very verse',
            style: TextStyle(
              color: Colors.black,
              fontSize: 20,
            ),),
          centerTitle: true,
          leading: IconButton(
            onPressed: () {
              Navigator.pop(context);
            },
            color: Colors.black,
            iconSize: 25,
            icon: Icon(Icons.arrow_back),

          ),

          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.bookmark_outline),
              iconSize: 25,
              color: Colors.black,
              onPressed: () {
                print('GD');
              }
          ),
          ],
        ),
      ),
    );
  }
}

我想将此代码简单地作为 function 放在其他几个页面上。

AppBar(title:VideoAppBar);

我想它可以这样做。

但它没有 go 回来。

我应该如何编写代码？

Answer 1

试试下面的代码希望它对你有帮助

创建您的常规 class 或您的小部件，如下所示：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  bool shouldPop = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: WillPopScope(
        onWillPop: () async {
          return shouldPop;
        },
        child: Scaffold(
          appBar: appBar(context),
          body: Center(
            child: Text('Test'),
          ),
        ),
      ),
    );
  }
}

创建另一个 dart 文件，如 appBar.dart 并在 dart 文件中声明您的 Appbar Widget。 根据需要调用您的小部件任何文件

appBar(BuildContext context) {
  return AppBar(
    backgroundColor: Colors.white,
    title: Text(
      'Very verse',
      style: TextStyle(
        color: Colors.black,
        fontSize: 20,
      ),
    ),
    centerTitle: true,
    leading: IconButton(
      onPressed: () {
        Navigator.pop(context);
      },
      color: Colors.black,
      iconSize: 25,
      icon: Icon(Icons.arrow_back),
    ),
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.bookmark_outline),
          iconSize: 25,
          color: Colors.black,
          onPressed: () {
            print('GD');
          }),
    ],
  );
}

1. 适用于WillPopScope class

2. 脚手架用 class

3. 对于AppBar

您的结果屏幕 ->

Answer 2

**使用顶部应用栏顶部应用栏提供与当前屏幕相关的内容和操作。 它用于品牌、屏幕标题、导航和操作。

常规的顶部应用栏可以转换为上下文操作栏。

在使用 Material 按钮之前，您需要为 Flutter 导入 Material Components package：

package:flutter/material.dart 你需要使用 MaterialApp。

有关开始使用 Flutter、go 的材料的更多信息，请访问 Flutter 材料库页面。

使顶部应用栏可访问 Flutter 的 API 支持大型 fonts、屏幕阅读器和足够对比度的可访问性设置。 更多信息，go 到 Flutter 的可访问性和国际化页面。

有关编写标签的更多指导，go 到我们的页面，了解如何编写良好的可访问性 label。

类型 顶部应用栏有两种类型： 1. 常规顶部应用栏 2. 上下文操作栏**

AppBar(
leading: Icon(Icons.menu),
title: Text('Page title'),
actions: [
Icon(Icons.favorite),
  Padding(
    padding: EdgeInsets.symmetric(horizontal: 16),
    child: Icon(Icons.search),
    ),
   Icon(Icons.more_vert),
   ],
   backgroundColor: Colors.purple,
),