Flutter-从页面修改AppBar

Question

所以我有一个Flutter应用程序有多个页面，这是通过var checkbox = document.querySelector("#redirect30sid"); checkbox.addEventListener( 'change', function() { if(this.checked) { // Checkbox is checked.. setTimeout(function(){ window.location.href = "https://www.example.com";//put your url here }, 30000);//Time in ms } else { // Checkbox is not checked.. //Do other stuff } }) 完成的。在此页面视图之前，我创建了PageView，因此它在应用程序的顶部具有持久性，并且在页面之间滚动时不会显示动画。 然后，我想在其中一个页面上创建一个底部的应用栏，但是为此，我需要访问应用栏元素，但是我不知道该怎么做。

这是主类，我要在其上编辑应用程序栏的页面是AppBar。

PlanPage

final GoogleSignIn googleSignIn = GoogleSignIn(); final FirebaseAuth auth = FirebaseAuth.instance; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '', home: _handleCurrentScreen() ); } Widget _handleCurrentScreen() { return StreamBuilder<FirebaseUser>( stream: auth.onAuthStateChanged, builder: (BuildContext context, snapshot) { print(snapshot); if (snapshot.connectionState == ConnectionState.waiting) { return SplashPage(); } else { if (snapshot.hasData) { return Home(); } return LoginPage(); } } ); } } class Home extends StatefulWidget { @override State<StatefulWidget> createState() { return HomeState(); } } class HomeState extends State<Home> { PageController _pageController; PreferredSizeWidget bottomBar; int _page = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( bottom: bottomBar, ), body: PageView( children: [ Container( child: SafeArea( child: RecipesPage() ), ), Container( child: SafeArea( child: PlanPage() ), ), Container( child: SafeArea( child: ShoppingListPage() ), ), Container( child: SafeArea( child: ExplorePage() ), ), ], /// Specify the page controller controller: _pageController, onPageChanged: onPageChanged ), bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, items: [ BottomNavigationBarItem( icon: Icon(Icons.book), title: Text('Recipes') ), BottomNavigationBarItem( icon: Icon(Icons.event), title: Text('Plan') ), BottomNavigationBarItem( icon: Icon(Icons.shopping_cart), title: Text('Shopping List') ), BottomNavigationBarItem( icon: Icon(Icons.public), title: Text("Explore"), ), ], onTap: navigationTapped, currentIndex: _page, ), ); } void onPageChanged(int page){ setState((){ this._page = page; }); } void setBottomAppBar(PreferredSizeWidget appBar) { this.bottomBar = appBar; print("setBottomAppBar: "+ appBar.toString()); } /// Called when the user presses on of the /// [BottomNavigationBarItem] with corresponding /// page index void navigationTapped(int page){ // Animating to the page. // You can use whatever duration and curve you like _pageController.animateToPage( page, duration: const Duration(milliseconds: 300), curve: Curves.ease ); } @override void initState() { super.initState(); initializeDateFormatting(); _pageController = PageController(); } @override void dispose(){ super.dispose(); _pageController.dispose(); } } 类看起来像这样

PlanPage

无论如何，它现在显示2个应用栏。[

Answer 1

通常，最好不要使用两个嵌套的可滚​​动区域。两个嵌套的支架相同。

也就是说，您可以收听页面更改（_pageController.addListener(listener)来更新page状态属性，并构建一个不同的AppBar.bottom（在Home小部件中，您可以根据用户正在查看的页面在PlanPage中删除支架。

-编辑-

在Home小部件中，您可以像这样向_pageController添加一个侦听器：

void initState() {
    super.initState();
    _pageController = PageController()
        ..addListener(() {
            setState(() {});
        });
}

使每次用户在您的PageView中滚动时都可以重新构建窗口小部件。带有空函数的setState调用可能看起来令人困惑，但是它仅允许您在_pageController.page更改时重新构建窗口小部件，这不是默认行为。您还可以拥有一个page状态属性，并在setState调用中对其进行更新以反映_pageController.page属性，但是结果将是相同的。

通过这种方式，您可以根据AppBar.bottom构建不同的_pageController.page：

// in your build function

final bottomAppBar = _pageController.page == 2 ? TabBar(...) : null;

final appBar = AppBar(
    bottom: bottomAppBar,
    ...
);

return Scaffold(
    appBar: appBar,
    ...
);