Question

以下是我创建的自定义标签：

class Tabs extends StatefulWidget {
  final tabs;
  final views;

  Tabs({this.tabs, this.views});

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

class _TabsState extends State<Tabs> with SingleTickerProviderStateMixin {
  late TabController _tabController;

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

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return SingleChildScrollView(
      physics: BouncingScrollPhysics(),
      child: Container(
        height: size.height,
        child: Column(
          children: [
            Container(
              height: 45,
              decoration: BoxDecoration(
                border: Border(
                  bottom:
                      BorderSide(color: Colors.grey, width: 3),
                ),
              ),
              child: TabBar(
                isScrollable: true,
                controller: _tabController,
                indicatorPadding: EdgeInsets.only(bottom: -2.5),
                indicator: UnderlineTabIndicator(
                  borderSide: BorderSide(
                    width: 4,
                    color: Colors.blue,
                  ),
                ),
                labelColor: Colors.blue,
                unselectedLabelColor: Colors.black,
                tabs: [
                  ...widget.tabs.map(
                    (e) => Tab(
                      child: Container(
                        child: Text(
                          e,
                          style: GoogleFonts.inter(
                            fontSize: 14,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: [...widget.views],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

但是一旦我在我的应用程序屏幕中使用它，我就会遇到溢出问题：


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: "Home"
        elevation: 0,
        toolbarHeight: 36,
      ),
      drawer: DrawerNavigation(),
      body: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        child: Column(
          children: [
            SizedBox(
              height: 100,
            ),
            Tabs(
              tabs: ['tab1', 'tab2'],
              views: [
                Tab1(),
                Tab2(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

我得到的错误来自单个子滚动视图。

我尝试从选项卡中删除单个子滚动视图，但随后自定义选项卡将无法工作。

Answer 1

只需像这样从自定义选项卡中删除单个子滚动视图，

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class Tabs extends StatefulWidget {
  final tabs;
  final views;

  Tabs({this.tabs, this.views});

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

class _TabsState extends State<Tabs> with SingleTickerProviderStateMixin {
  late TabController _tabController;

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

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Container(
      height: size.height,
      child: Column(
        children: [
          Container(
            height: 45,
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(color: Colors.grey, width: 3),
              ),
            ),
            child: TabBar(
              isScrollable: true,
              controller: _tabController,
              indicatorPadding: EdgeInsets.only(bottom: -2.5),
              indicator: UnderlineTabIndicator(
                borderSide: BorderSide(
                  width: 4,
                  color: Colors.blue,
                ),
              ),
              labelColor: Colors.blue,
              unselectedLabelColor: Colors.black,
              tabs: [
                ...widget.tabs.map(
                  (e) => Tab(
                    child: Container(
                      child: Text(
                        e,
                        style: GoogleFonts.inter(
                          fontSize: 14,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: [...widget.views],
            ),
          ),
        ],
      ),
    );
  }
}

并将无状态小部件（主页）转换为有状态小部件，它会像这样正常工作，

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 100,
            ),
            Tabs(
              tabs: ["tab1", "tab2"],
              views: [okay(), okay()],
            )
          ],
        ),
      ),
    );
  }
}

如何解决颤振选项卡中的溢出问题？

1 个答案: