当用户向下滚动列表时,我试图隐藏底部应用程序栏,就像材料设计文档中行为部分中显示的那样:
https://material.io/design/components/app-bars-bottom.html#behavior
我正在寻找的效果如下所示:https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1gaSrddolFHd8BwOioeYz0ODiyEhCevtn%2Fbehavior-scroll.mp4
到目前为止,我向脚手架添加了底部应用栏,但它没有滚动行为。
StackOverflow 上有一个类似的问题得到了回答,但它显示了一种解决方法,并且不久前已经得到了回答。
Flutter 中是否有合法的方法来实现这种效果?
我的代码:
import 'package:fitness_fatality_flutter/data/entities/exercise.dart';
import 'package:fitness_fatality_flutter/data/entities/workout.dart';
import 'package:flutter/material.dart';
class WorkoutDetailsPage extends StatelessWidget {
Workout _workout = Workout();
final List<Exercise> exercises = [
Exercise(name: "Push Ups"),
Exercise(name: "Bench press"),
Exercise(name: "Pull ups"),
Exercise(name: "Press ups"),
Exercise(name: "Crunches"),
Exercise(name: "Sit ups"),
Exercise(name: "BIceps curl"),
Exercise(name: "Something else"),
Exercise(name: "Push Ups"),
Exercise(name: "Bench press"),
Exercise(name: "Pull ups"),
Exercise(name: "Press ups"),
Exercise(name: "Crunches"),
Exercise(name: "Sit ups"),
Exercise(name: "BIceps curl"),
Exercise(name: "Something else"),
Exercise(name: "Push Ups"),
Exercise(name: "Bench press"),
Exercise(name: "Pull ups"),
Exercise(name: "Press ups"),
Exercise(name: "Crunches"),
Exercise(name: "Sit ups"),
Exercise(name: "BIceps curl"),
Exercise(name: "Something else"),
Exercise(name: "Push Ups"),
Exercise(name: "Bench press"),
Exercise(name: "Pull ups"),
Exercise(name: "Press ups"),
Exercise(name: "Crunches"),
Exercise(name: "Sit ups"),
Exercise(name: "BIceps curl"),
Exercise(name: "Something else"),
Exercise(name: "Push Ups"),
Exercise(name: "Bench press"),
Exercise(name: "Pull ups"),
Exercise(name: "Press ups"),
Exercise(name: "Crunches"),
Exercise(name: "Sit ups"),
Exercise(name: "BIceps curl"),
Exercise(name: "Something else"),
];
WorkoutDetailsPage(this._workout);
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blue,
elevation: 12,
onPressed: () {},
),
bottomNavigationBar: BottomAppBar(
elevation: 8,
shape: CircularNotchedRectangle(),
color: Colors.blue,
child: Container(
height: 50,
child: Row(
children: <Widget>[Text("data")],
),
),
),
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
bottom:BottomAppBar(), //<-- This would throw an error
expandedHeight: 150,
pinned: true,
floating: true,
snap: true,
flexibleSpace: FlexibleSpaceBar(
title: Text(_workout.name),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(buildSliverListItem,
childCount: exercises.length),
),
],
),
);
}
Widget buildSliverListItem(BuildContext context, int index) {
return Center(
child: ListTile(
title: Text(exercises[index].name),
),
);
}
}