我如何切换到另一个选项卡屏幕？

Question

当我点击选项卡栏上的另一个图标，但它不起作用时，我想切换到另一个屏幕。我一直在HomeScreen（）中，无法切换到HomeScreenMapView（）。我认为ListView.builder返回时存在问题，但我不知道如何继续。

我的代码：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import '../screens/home_screen.dart';
import '../screens/home_screen_map_view.dart';

class TabBarTop extends StatefulWidget {
  @override
  _TabBarTopState createState() => _TabBarTopState();
}

class _TabBarTopState extends State<TabBarTop> with SingleTickerProviderStateMixin {
  bool _isAppbar = true;
      ScrollController _scrollController = new ScrollController();

      @override
      void initState() {
        super.initState();
        _scrollController.addListener(() {
          if (_scrollController.position.userScrollDirection ==
              ScrollDirection.reverse) {
            appBarStatus(false);
          }
          if (_scrollController.position.userScrollDirection ==
              ScrollDirection.forward) {
            appBarStatus(true);
          }
        });
      }

      void appBarStatus(bool status) {
        setState(() {
          _isAppbar = status;
        });
      }

      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
            appBar: PreferredSize(
              preferredSize: Size.fromHeight(MediaQuery.of(context).size.height * 0.12),
              child: AnimatedContainer(
                height: _isAppbar ? MediaQuery.of(context).size.height * 1 : 0.0,
                duration: Duration(milliseconds: 200),
                child: CustomAppBar(),
              ),
            ),
            body: ListView.builder(
              controller: _scrollController,
              itemCount: 100,
              itemBuilder: (BuildContext context, int index) {
                return HomeScreen();
              },
            ),
          ),
        );
      }
    }

    class CustomAppBar extends StatefulWidget {
      @override
      AppBarView createState() => new AppBarView();
    }

    class AppBarView extends State<CustomAppBar> {
      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
      length: 2,
      child: NestedScrollView(
        headerSliverBuilder: (context, value) {
          return [
            SliverAppBar(
              title: Center(
                heightFactor: 0,
                child: Padding(
                  padding: const EdgeInsets.only(top: 7),
                  child: Image.asset(
                    'assets/images/***.png',
                    fit: BoxFit.cover,
                    scale: MediaQuery.of(context).size.width * 0.007,
                    alignment: Alignment.bottomCenter,
                  ),
                ),
              ),
              expandedHeight: MediaQuery.of(context).size.height * 0.12,
              primary: true,
              floating: true,
              pinned: true,
              bottom: TabBar(
                indicatorColor: Color.fromRGBO(253, 166, 41, 1.0),
                tabs: <Widget>[
                  Tab(
                    icon: Icon(Icons.list),
                  ),
                  Tab(
                    icon: Icon(Icons.location_on),
                  ),
                ],
              ),
              forceElevated: false,
              flexibleSpace: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: <Color>[
                      Color.fromRGBO(107, 176, 62, 1.0),
                      Color.fromRGBO(153, 199, 58, 1.0),
                    ],
                  ),
                ),
              ),
            )
          ];
        },
        body: TabBarView(
          children: <Widget>[
            HomeScreen(),
            HomeScreenMapView(),
          ],
        ),
      ),
    );
      }
    }

谢谢：）

Answer 1

我认为您不需要TabBarTop类来实现，因此，您只能使用提供该功能的CustomAppBar类。

我不知道我目前对您的问题和需要有多少了解，但我正在回答。

希望以下代码可以帮助您。

直接从您的主体直接调用CustomAppBar。

class CustomAppBar extends StatefulWidget {
  @override
  AppBarView createState() => new AppBarView();
}

class AppBarView extends State<CustomAppBar> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: NestedScrollView(
        headerSliverBuilder: (context, value) {
          return [
            SliverAppBar(
              title: Center(
                heightFactor: 0,
                child: Padding(
                  padding: const EdgeInsets.only(top: 7),
                  child: Image.asset(
                    'assets/images/crown.png',
                    fit: BoxFit.cover,
                    scale: MediaQuery.of(context).size.width * 0.007,
                    alignment: Alignment.bottomCenter,
                  ),
                ),
              ),
              expandedHeight: MediaQuery.of(context).size.height * 0.12,
              primary: true,
              floating: true,
              pinned: true,
              bottom: TabBar(
                indicatorColor: Color.fromRGBO(253, 166, 41, 1.0),
                tabs: <Widget>[
                  Tab(
                    icon: Icon(Icons.list),
                  ),
                  Tab(
                    icon: Icon(Icons.location_on),
                  ),
                ],
              ),
              forceElevated: false,
              flexibleSpace: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: <Color>[
                      Color.fromRGBO(107, 176, 62, 1.0),
                      Color.fromRGBO(153, 199, 58, 1.0),
                    ],
                  ),
                ),
              ),
            )
          ];
        },
        body: TabBarView(
          children: <Widget>[
            HomeScreen(),
            HomeScreenMapView(),
          ],
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return Text("home Screen");
        },
      ),
    );
  }
}

class HomeScreenMapView extends StatelessWidget {
  // implement map here
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Home Screen Map"),
      ),
    );
  }
}