UI只有在Flutter中热重新加载或重启后才有响应

Question

我喜欢在向下滚动时隐藏floatingActionButton，在向上滚动时显示它。但它只能在热重启或重新加载后工作。

transaction.dart

class Transaction extends StatefulWidget {
const Transaction({Key? key}) : super(key: key);
@override
State<Transaction> createState() => _TransactionState();
}
bool isFab = false;
class _TransactionState extends State<Transaction> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
body: SafeArea(
child: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (context, innerBoxIsScrolled) => [
SliverAppBar(
pinned: true,
floating: true,
snap: true,
centerTitle: true,
title: Text(
"Money Manager",
style: TextStyle(letterSpacing: 1.5),
strutStyle: StrutStyle(
fontSize: 20, fontStyle: FontStyle.normal),
),
bottom: TabBar(tabs: [
Tab(
child: Text(
"Income",
style:
TextStyle(fontSize: 18, letterSpacing: 1.5),
),
),
Tab(
child: Text(
"Expense",
style:
TextStyle(fontSize: 18, letterSpacing: 1.5),
),
)
]),
)
],
body: TabBarView(children: [Income(), Expense()]))),
floatingActionButton: isFab ? Fab() : null,
),
);
}
}

expense.dart

class Expense extends StatefulWidget {
const Expense({Key? key}) : super(key: key);
@override
State<Expense> createState() => _ExpenseState();
}
class _ExpenseState extends State<Expense> {
@override
Widget build(BuildContext context) {
return NotificationListener<UserScrollNotification>(
onNotification: (notification) {
if (notification.direction == ScrollDirection.forward) {
setState(() => isFab = true);
} else if (notification.direction == ScrollDirection.reverse) {
setState(() => isFab = false);
}
return true;
},
child: ListView.separated(
itemBuilder: (context, index) {
return ListTile(
leading: CircleAvatar(),
trailing: Text("- ₹2000"),
title: Text("category"),
subtitle: Text(formatter),
);
},
separatorBuilder: (context, index) {
return Divider();
},
itemCount: 30),
);
}
}

Answer 1

在您的代码中，isFab被声明为false作为全局变量，因此它不会被setState调用更改。我不知道为什么它开始工作后，热重新加载或重新启动。

为了使它工作，你必须使它成为_TransactionState的一部分，并且你还必须使它可以从ExpenseState访问，因为你把NotificationListener放在那里。

但可能最简单的解决方案是将Transaction中的NotificationListener作为Scaffold的主体，然后将isFab变量声明为_TransactionState的一部分。你可以在这里看到:我必须改变一些东西(比如使用默认的FAB)来运行dartpad，但是现在FAB只在顶部出现。