Я работаю над своим первым проектом Fluttre, и мне нужна помощь в устранении 1 проблемы. Я прилагаю 3 изображения, чтобы объяснить, что я хочу сделать. На первых 2 изображениях все работает как надо - однако проблема в 3-м изображении.
Внутри моего SliverAppBar я поместил пользовательскую панель поиска, которая ведет себя как изображение и скрыта, когда пользователь прокручивает вверх - и это работает нормально.
Небольшая проблема, которую я хочу исправить, заключается в том, что я хочу скрыть кнопки actionB справа, когда режим поиска активирован, как показано на изображении 3
изображение 1 изображение 2 изображение 3
class HomePage extends StatelessWidget with NavigationStates {
@override
Widget build(BuildContext context) {
// Render a sliver appbar.
final sliverAppBar = SliverAppBar(
pinned: true,
expandedHeight: 140.0,
backgroundColor: Theme.of(context).primaryColor,
flexibleSpace: FlexibleSpaceBar(
/* Page Title */
title: Text(
AppStrings.homeTitle,
style: Theme.of(context).textTheme.title.copyWith(
color: CustomColors().novaWhite,
),
),
/* Search Button */
background: Column(
children: <Widget>[
SearchBar(
canSearch: true,
),
],
),
),
/* Action Buttons */
actions: <Widget>[
IconButton(
icon: Icon(Icons.filter_list),
color: CustomColors().novaWhite,
onPressed: () {},
),
IconButton(
icon: Icon(Icons.more_vert),
color: CustomColors().novaWhite,
onPressed: () {},
),
],
);
// Render android scaffold.
final pageContent = SafeArea(
bottom: false,
child: CustomScrollView(
slivers: <Widget>[
sliverAppBar,
SliverToBoxAdapter(
child: Container(
height: MediaQuery.of(context).size.height,
padding: EdgeInsets.all(Constants.paddingXY_32),
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor,
),
// Page content begins here...
),
),
],
),
);
return Scaffold(
body: pageContent,
backgroundColor: Theme.of(context).primaryColor,
);
}
}
Панель поиска
class SearchBar extends StatefulWidget implements PreferredSizeWidget {
final bool canSearch;
const SearchBar({Key key, this.canSearch = false}) : super(key: key);
@override
Size get preferredSize => Size.fromHeight(56.0);
@override
_SearchBar createState() => _SearchBar();
}
class _SearchBar extends State<SearchBar>
with SingleTickerProviderStateMixin {
double rippleStartX, rippleStartY;
AnimationController _controller;
Animation _animation;
bool isInSearchMode = false;
@override
initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
_controller.addStatusListener(animationStatusListener);
}
animationStatusListener(AnimationStatus animationStatus) {
if (animationStatus == AnimationStatus.completed) {
setState(() {
isInSearchMode = true;
});
}
}
void onSearchTapUp(TapUpDetails details) {
setState(() {
rippleStartX = details.globalPosition.dx;
rippleStartY = details.globalPosition.dy;
});
print("pointer location $rippleStartX, $rippleStartY");
_controller.forward();
}
cancelSearch() {
setState(() {
isInSearchMode = false;
});
onSearchQueryChange('');
_controller.reverse();
}
onSearchQueryChange(String query) {
print('search $query');
}
@override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
return Stack(
children: <Widget>[
AppBar(
elevation: 0.0,
backgroundColor: Theme.of(context).primaryColor,
/*Search Icon */
leading: widget.canSearch
? GestureDetector(
child: IconButton(
icon: Icon(
Icons.search,
color: CustomColors().novaWhite,
),
onPressed: (null),
),
onTapUp: onSearchTapUp,
)
: Container(),
),
/*Animation */
AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return CustomPaint(
painter: Painter(
containerHeight: widget.preferredSize.height,
center: Offset(rippleStartX ?? 0, rippleStartY ?? 0),
radius: _animation.value * screenWidth,
context: context,
),
);
},
),
isInSearchMode
? (Search(
onCancelSearch: cancelSearch,
onSearchQueryChanged: onSearchQueryChange,
))
: (Container())
],
);
}
}