Flutter - 使用 Material 在 longpress 上更改 appbar

Posted 2023-02-23

【中文标题】Flutter - 使用 Material 在 longpress 上更改 appbar

【英文标题】：Flutter - Change appbar on longpress with Material

【发布时间】：2019-08-12 06:14:15

【问题描述】：

我正在尝试用 Flutter 做这种事情： https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F0B3T7oTWa3HiFcHBDaTlreHdVZGc%2Fitem-selection-selecting-items.mp4

var gestureTemp = GestureDetector(
    onLongPress: ()
      print('LONG PRESSED');
      //CHANGE APPBAR
    ,
    child: Padding(
        padding: EdgeInsets.only(right:8),
        child: Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.grey.shade800,
                child: icon
            ),
            label: Text(space.label, style: TextStyle(fontSize: 12, color:Colors.grey.shade800))
    ),
  ));

它检测到长按，但我不知道如何更改我的应用栏...

有什么想法吗？

编辑：这就是我所做的

var appBar1 = AppBar(...);
var appBar2 = AppBar(...);
var appBar = appBar1;

我的 appBar 显示在我的 Scaffold 中。

在我的 GestureDetector 上：

onLongPress: ()
  print('LONG PRESSED');
  setState(() 
    appBar = appBar2;
  );
,

【问题讨论】：

您在更改应用栏时遇到了哪一步？图标的动画，颜色？用新的应用栏替换？

对我来说最好的办法是改变整个应用栏，你认为有可能吗？

目前，我已经创建了两个 appBar 变量，第一个是我常用的 appbar，第二个是长按后的 appbar。当我长按时，我调用了一个 setState，在其中我用第二个更改了我的 appbar，但没有任何变化

很高兴看到该代码 sn-p。您的方法听起来不错，但它只会切换没有动画的应用栏吗？

当然，稍后我会看到动画。我已经编辑了我的帖子，够吗？

【参考方案1】：

欢迎来到 ***！

您描述的方法听起来很正确。这是一个独立的示例，因此您可以仔细检查您的代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(home: MyPage());
  


class MyPage extends StatefulWidget 
  @override
  _MyPageState createState() => _MyPageState();


class _MyPageState extends State<MyPage> 
  static final AppBar _defaultBar = AppBar(
    title: Text('Inbox'),
    leading: Icon(Icons.menu),
    actions: <Widget>[Icon(Icons.search), Icon(Icons.more_vert)],
    backgroundColor: Colors.black,
  );

  static final AppBar _selectBar = AppBar(
    title: Text('1'),
    leading: Icon(Icons.close),
    actions: <Widget>[
      Icon(Icons.flag),
      Icon(Icons.delete),
      Icon(Icons.more_vert)
    ],
    backgroundColor: Colors.deepPurple,
  );

  AppBar _appBar = _defaultBar;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: _appBar,
      body: Center(
        child: RaisedButton(
          child: Text('Switch!'),
          onPressed: () 
            setState(() 
              _appBar = _appBar == _defaultBar
                  ? _selectBar
                  : _defaultBar;
            );
          ,
        ),
      ),
    );
  

【讨论】：

谢谢你，尼克拉斯！我尝试了您的代码，它运行良好，并且由于它我能够找到我的问题。我在错误的地方定义了我的变量......我也很欣赏这个开关：D

如果您有任何未解决的问题，我期待帮助您改进 ;) 如果您喜欢这个答案，我将不胜感激：D

非常感谢，谢谢！关于upvote，我试过了，但我至少需要15个声望点......我会尽快做

@NiklasPor 是否可以只重建 appBar 而不是整个 Scaffold？