AngularDart中如何使用工具栏？自建Waterfall Flexible Toolbar方法

Hey there! Great question—let me break this down for you clearly.

First, to answer your core question: Yes, you’ll need to build this toolbar yourself (or adapt existing components), since the official AngularDart Components library doesn’t include a pre-built Waterfall Flexible Toolbar matching the Material Components Web example you’re referencing. But don’t worry—it’s totally manageable with a bit of custom code.

Here’s a step-by-step guide to creating your own:

1. Lay the Groundwork with Dependencies #

First, make sure your pubspec.yaml includes the necessary AngularDart Material dependencies:

dependencies:
  angular: ^7.0.0 # Use the latest stable version
  angular_components: ^14.0.0 # Provides base Material components and utilities

Run pub get to install these if you haven’t already.

2. Create the Toolbar Component Structure #

Start by defining a custom component with a toolbar and scrollable content area. The template will use basic HTML and AngularDart directives to bind behavior:

<!-- waterfall_toolbar_component.html -->
<header class="waterfall-toolbar" [class.shrunk]="isToolbarShrunk">
  <div class="toolbar-inner">
    <h1 class="toolbar-title">My Awesome App</h1>
    <!-- Add Material buttons/icons here using angular_components -->
    <material-button icon (trigger)="doSomething()">
      <material-icon>menu</material-icon>
    </material-button>
  </div>
</header>

<!-- Scrollable main content -->
<main class="page-content" (scroll)="onContentScroll($event)">
  <!-- Your app content goes here (add long text/elements to test scrolling) -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</main>

3. Add the Scroll Logic in Dart #

In your component class, listen for scroll events and toggle a boolean flag to trigger the toolbar shrink/expand state:

// waterfall_toolbar_component.dart
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'waterfall-toolbar',
  templateUrl: 'waterfall_toolbar_component.html',
  styleUrls: ['waterfall_toolbar_component.css'],
  directives: [
    coreDirectives,
    MaterialButtonComponent,
    MaterialIconComponent,
  ],
)
class WaterfallToolbarComponent {
  bool isToolbarShrunk = false;
  // Adjust this threshold to control when the toolbar shrinks (in pixels)
  final double scrollThreshold = 80;

  void onContentScroll(ScrollEvent event) {
    final scrollPosition = event.target.scrollTop;
    // Update the flag based on how far the user has scrolled
    isToolbarShrunk = scrollPosition >= scrollThreshold;
  }

  void doSomething() {
    // Add your button action logic here
  }
}

4. Style with Smooth Animations #

Use CSS transitions to make the toolbar’s shrink/expand effect smooth and match the Material design feel:

/* waterfall_toolbar_component.css */
.waterfall-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  padding: 28px 16px;
  background-color: #1976d2;
  color: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}

.waterfall-toolbar.shrunk {
  height: 64px;
  padding: 16px;
}

.toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.toolbar-title {
  font-size: 28px;
  margin: 0;
  transition: font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.waterfall-toolbar.shrunk .toolbar-title {
  font-size: 20px;
}

.page-content {
  margin-top: 120px; /* Match the initial toolbar height */
  min-height: 2000px; /* Ensure enough content to scroll */
  padding: 16px;
}

5. Tweak to Match Material Components Web’s Behavior #

If you want to replicate the exact behavior from the MDW example, you can:

• Adjust the CSS values (heights, padding, transition curves) to match MDW’s specs
• Add more dynamic behavior, like shifting the title position as the toolbar shrinks
• Use AngularDart’s Renderer2 service if you need fine-grained DOM control (though binding classes like we did is preferred)

The key idea is leveraging AngularDart’s data binding to toggle CSS classes based on scroll position, which triggers smooth transitions—no raw JavaScript needed!

Hope this helps you get started smoothly. Feel free to tweak the thresholds, styles, and functionality to fit your app’s needs.

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