dart 点击页面上的Flutter Tab Bar更改未发生

xpcnnkqh 于 5个月前发布在 Flutter

关注(0)|答案(2)|浏览(43)

我试图使用标签栏和标签栏视图.它应该通过左右滑动，也通过点击标签栏改变页面.但录音是不改变标签栏视图页面.我已经尝试使用扩展的小部件，但它仍然不工作.有人能告诉我是什么原因导致的问题？这里是我的代码：

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 360.0,
            child: ClipPath(
              clipper: MyCliper(),
              child: Container(
                color: Colors.blue,
              ),
            ),
          ),
          SizedBox(
            height: MediaQuery.of(context).size.height - 360.0,
            child: Stack(
              children: [
                Expanded(
                  child: TabBar(
                    controller: _tabController,
                    tabs: const [
                      Tab(text: 'Tab 1'),
                      Tab(text: 'Tab 2'),
                    ],
                  ),
                ),
                Expanded(
                  child: TabBarView(
                    controller: _tabController,
                    children: const [
                      Center(child: Text('Tab 1 Content')),
                      Center(child: Text('Tab 2 Content')),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class MyCliper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height);
    final firstCurve = Offset(0, size.height - 20);
    final lastCurve = Offset(30, size.height - 20);
    path.quadraticBezierTo(
        firstCurve.dx, firstCurve.dy, lastCurve.dx, lastCurve.dy);
    final secondFirstCurve = Offset(0, size.height - 20);
    final secondLastCurve = Offset(size.width - 30, size.height - 20);
    path.quadraticBezierTo(secondFirstCurve.dx, secondFirstCurve.dy,
        secondLastCurve.dx, secondLastCurve.dy);
    final thirdFirstCurve = Offset(size.width, size.height - 20);
    final thirdLastCurve = Offset(size.width, size.height);
    path.quadraticBezierTo(thirdFirstCurve.dx, thirdFirstCurve.dy,
        thirdLastCurve.dx, thirdLastCurve.dy);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
  }
}

字符串
我的页面截图：

dart

来源：https://stackoverflow.com/questions/77617530/flutter-tab-bar-on-tap-page-change-is-not-happening

2条答案

按热度按时间

igsr9ssn1#

您的代码的问题是您正在为TabBar和TabBarView使用Expanded小部件。Expanded小部件应放置在Column或Row中，以允许其子部件在可用空间内展开。在您的情况下，Expanded小部件放置在Stack中，这可能不会让它们按预期展开。

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 360.0,
            child: ClipPath(
              clipper: MyClipper(),
              child: Container(
                color: Colors.blue,
              ),
            ),
          ),
          Expanded(
            child: Column(
              children: [
                TabBar(
                  controller: _tabController,
                  tabs: const [
                    Tab(text: 'Tab 1'),
                    Tab(text: 'Tab 2'),
                  ],
                ),
                Expanded(
                  child: TabBarView(
                    controller: _tabController,
                    children: const [
                      Center(child: Text('Tab 1 Content')),
                      Center(child: Text('Tab 2 Content')),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

字符串

赞(0）回复(0）举报 5个月前

vnjpjtjt2#

的数据
1.用DefaultTabController Package

class MyHomePage extends StatelessWidget {
   const MyHomePage({Key? key}) : super(key: key);

   @override
   Widget build(BuildContext context) {
     return DefaultTabController(
       length: 2,
       child: Scaffold(
         body: Column(
           children: [
             SizedBox(
               height: 360.0,
               child: ClipPath(
                 clipper: MyCliper(),
                 child: Container(
                   color: Colors.blue,
                 ),
               ),
             ),
             SizedBox(
               height: MediaQuery.of(context).size.height - 360.0,
               child: Stack(
                 children: [
                   Column(
                     children: [
                       TabBar(
                         tabs: const [
                           Tab(text: 'Tab 1'),
                           Tab(text: 'Tab 2'),
                         ],
                       ),
                       Expanded(
                         child: TabBarView(
                           children: const [
                             Center(child: Text('Tab 1 Content')),
                             Center(child: Text('Tab 2 Content')),
                           ],
                         ),
                       ),
                     ],
                   ),
                 ],
               ),
             ),
           ],
         ),
       ),
     );
   }

字符串
}

赞(0）回复(0）举报 5个月前

我来回答

dart 点击页面上的Flutter Tab Bar更改未发生

2条答案

相关问题

热门标签

最新问答