标签: flutter-appbar

如果我有这样的 AppBar：

我如何像这样添加一个可点击的图标？

我遇到了一些问题。我想制作一个图像、一个文本和两个图标，AppBar但我不能让它按我想要的方式工作。

我试图在图像和文本之后连续制作一些字体。图像和文本成功显示在 my 中AppBar，但其余 2 种字体（手推车和通知）显示一些错误。

Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.amber,  
      appBar: new AppBar
        (
        title: new Row
          (
          mainAxisAlignment: MainAxisAlignment.start,
            children:
            [
              Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,), 
              Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop'))
            ],
          )

        ),

....

我的目标是在用户向下滚动时更改应用栏的颜色和不透明度。

我的逻辑是：

• 滚动偏移 = 0 : appbar 是红色的，不透明度 = 1
• 0 < 滚动偏移 < 40 ：appbar 为蓝色，不透明度 = 0.4
• 40 <= 滚动偏移：appbar 是蓝色的，不透明度与滚动偏移成正比

我想出了以下代码：

import 'package:flutter/material.dart';
import 'package:gradient_app_bar/gradient_app_bar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState(); …

如何在 FLUTTER 中创建带有可滚动工具栏的网格视图。我找到了带有标题ListViewWithHeader的列表视图。但是我需要像下面提到的图像中那样带有标题的 GridView。我使用 SilverGrid ignorer 来构建这个布局，这有点滞后。所以我需要另一种选择。

Container setDataToContainer() {
  return Container(
    color: Colors.white,
    margin: EdgeInsets.only(left: 4.0, right: 4, bottom: 4, top: 4),
    child: CustomScrollView(
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildListDelegate(
            [
              HeaderWidget("Header 1"),
            ],
          ),
        ),
        SliverGrid(
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          delegate: SliverChildListDelegate(
            [
              BodyWidget("title", "key_x", "pnl.svg"),
              BodyWidget("title2", "key_x", "cls.svg"),
              BodyWidget(
                  "title3", "key_x", "irr.svg"),
              BodyWidget(
                  "title4", "key_x", "icp.svg"),
            ],
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate(
            [
              HeaderWidget("Header 2"),
            ],
          ),
        ),
        SliverGrid(
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          delegate: SliverChildListDelegate(
            [
              BodyWidget("title5", "key_x", …

刚学flutter，对TabController的使用很迷茫，按照官网的描述做了，但是出现错误，不知道怎么解决。

我只想在更改选项卡时更改标题并从应用栏引导。

final List<ChangeTitleAndLeading> _data = [
  new ChangeTitleAndLeading(title: "Home", leading: Icon(Icons.home)),
  new ChangeTitleAndLeading(title: "Profile", leading: Icon(Icons.person)),
  new ChangeTitleAndLeading(title: "Friends", leading: Icon(Icons.people))
];

ChangeTitleAndLeading _handler;
TabController _controller;

@override
void initState() {
  super.initState();

  _checkEmailVerification();

  _controller = TabController(vsync: this, length: 3);
  _handler = _data[0];
  _controller.addListener(_handleSelected);
}

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

void _handleSelected() {
  setState(() {
    _handler = _data[_controller.index];
  });
}

return MaterialApp(
  theme: new ThemeData(
    primarySwatch: Colors.teal,
  ),
  home: new Scaffold(
    appBar: new AppBar(
      leading: Icon(Icons.home),
      title: new Text("Home"), …

在我的应用程序栏中，标题显示为白色文本，但图标是深灰色或其他颜色。我也想让图标变成白色。

但图标主题中的颜色没有任何效果！

直接添加到 AppBar 时不会...

Scaffold(
  appBar: AppBar(automaticallyImplyLeading: false,
      actionsIconTheme: IconThemeData(color: Colors.white),
      iconTheme: IconThemeData(color: Colors.white),

而且也不在主题中...

appBarTheme: AppBarTheme(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
    actionsIconTheme: IconThemeData(color: Colors.white),
    iconTheme: IconThemeData(color: Colors.white),

),

我想让主题发挥作用！无法在图标上单独设置颜色。

我究竟做错了什么？Material 3 真的准备好投入生产了吗？

谢谢！

注意：这是材料 3 的问题！在材质 2 中，一切都按预期进行！

我正在尝试创建一个具有WebView的屏幕（来自webview_flutter：^ 0.3.5 + 3），AppBar并且我想在用户滚动时在屏幕外滚动。

我偶然发现了该指南，并尝试实现类似但没有骰子的方法。
是否可以WebView在CustomScrollViewwith 中使用，Slivers还是尚不支持？

我可以滚动应用栏来工作，如果我在创建常规小工具SliverChildListDelegate（我试过Row，Text，Container等），但没有运气了WebView。

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: const Text("Heading"),
            floating: true,
          ),
          SliverList(
            delegate: SliverChildListDelegate([
              Container(
                child: WebView(
                  initialUrl: url,
                  javascriptMode: JavascriptMode.unrestricted,
                ),
              )
            ]
            ),
          )
        ],
      )
  );
}

欢迎任何指针/建议/ RTFM。

编辑赏金

jordan-davies提供的解决方案有效，但是非常不稳定。每当将SliverAppBar滚动离开时，都会WebView尝试自行调整大小以填充剩余的视口。这使得波动非常缓慢。

@override
Widget build(BuildContext context) { …

我最近尝试在没有 AppBar 或至少完全不可见的情况下为我的菜单滑块保留一个汉堡图标。第一次尝试是使用 SafeArea 但它清空了 Scaffold。然后我尝试将不透明度设置为 0.0，如下面的代码所示。但它给出了与 SafeArea 相同的结果，在 Scaffold 上没有任何内容。请问有人可以帮忙吗？

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: ThemeData(
        // Define the default Brightness and Colors
        brightness: Brightness.dark,
        primaryColor: Colors.lightBlue[800],
        accentColor: Colors.cyan[600],
      ),
      home: Scaffold(
          Opacity(
            opacity: 0.0,
            appBar: AppBar(),
          ),
          drawer: new Drawer(
            child: new ListView(),
          ),
          body: new Center(
              child: new Column(
            children: <Widget>[], …

这是我的 AppBar Tittle 代码，但它不起作用

 Widget build(BuildContext context){
return new Scaffold(
  appBar: new AppBar(
    title: new Padding(
      padding: const EdgeInsets.only(left: 20.0),
      child: new Text("App Name"),
    ),
  ),
);}

将 Flutter 集成到主机应用程序 ( docs ) 时，有几种方法可以做到，其中一种（最简单的）是通过FlutterActivity类在新 Activity 中打开 Flutter 。像这样：

// Java
hostActivity.startActivity(                
  FlutterActivity.withCachedEngine("my_engine_id").build(context)
);

传统上，对于 Flutter 端的 Android 样式窗口，我们创建带有后退按钮的AppBar 。

此 AppBar后退按钮和 Android 系统后退按钮的行为必须相同：按下后退按钮时必须关闭（完成）前台活动。

当前系统后退按钮确实关闭了FlutterActivity，但是如何从 Flutters AppBar后退按钮模拟这种行为？

// Dart - Flutter side
...
child: AppBar(
  leading: IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
          // WHAT MUST BE HERE?
      }),
...

建立 Flutter 端和主机之间的 PS 平台通道 - 我可以从任何端调用任何代码