当我将小部件放入 TabBarView 的子项时，它显示白屏答案

【问题标题】：It shows white screen when I put widget in TabBarView's children当我将小部件放入 TabBarView 的子项时，它显示白屏
【发布时间】：2021-12-15 10:18:01
【问题描述】：

在将任何子项放入 TabBarView 之前一切正常。但是当我将 2 个孩子放到 TabBarView 时，它会显示全白屏。

LoginPage() 和 Sign_up() 是我的自定义小部件

.................................................. ..................................................... ..................................................... ..................................................

这是我的代码：

class LoginSignup extends StatefulWidget {
  LoginSignup({Key? key}) : super(key: key);

  @override
  State<LoginSignup> createState() => _LoginState();
}

class _LoginState extends State<LoginSignup> with TickerProviderStateMixin {
  var loginSection = true;

  late TabController tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: const Color(0xffF2F2F2),
        body: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: SizedBox(
            width: MediaQuery.of(context).size.width,
            child: Column(
              children: [
                // Upper Part
                Container(
                  height: 300,
                  decoration: const BoxDecoration(
                      borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(30),
                        bottomRight: Radius.circular(30),
                      ),
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(
                            color: Color(0xff919191),
                            offset: Offset.zero,
                            blurRadius: 10)
                      ]),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Padding(
                        padding: EdgeInsets.only(top: 90),
                        child: Center(
                          child: CircleAvatar(
                            backgroundColor: Colors.transparent,
                            radius: 45,
                            backgroundImage:
                                AssetImage('assets/images/logo.png'),
                          ),
                        ),
                      ),
                      DefaultTabController(
                        length: 2,
                        child: TabBar(
                          labelColor: Colors.black,
                          indicatorColor: const Color(0xffFA4A0C),
                          indicatorPadding:
                              const EdgeInsets.only(left: 38, right: 38),
                          labelStyle: GoogleFonts.lato(
                              fontSize: 20, fontWeight: FontWeight.w600),
                          tabs: const [
                            Tab(
                              text: "Login",
                            ),
                            Tab(
                              text: "Sign-Up",
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                // Lower Part
                Container(
                  margin: const EdgeInsets.only(top: 40),
                  padding: const EdgeInsets.symmetric(horizontal: 50),
                  child: TabBarView(
                    controller: tabController,
                    children: const [LoginPage(), Sign_up()],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart flutter-layout flutter-test

【解决方案1】：

当您使用TabController 时，您不需要使用DefaultTabController。

而TabBarView 出现未绑定高度/渲染问题，在这种情况下您需要提供高度。

我会说，使用LayoutBuilder 作为主要body 的第一个孩子。


class LoginSignup extends StatefulWidget {
  LoginSignup({Key? key}) : super(key: key);

  @override
  State<LoginSignup> createState() => _LoginState();
}

class _LoginState extends State<LoginSignup> with TickerProviderStateMixin {
  var loginSection = true;

  late TabController tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          resizeToAvoidBottomInset: false,
          backgroundColor: const Color(0xffF2F2F2),
          body: LayoutBuilder(
            builder: (context, constraints) => SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: SizedBox(
                /// dont need it
                child: Column(
                  children: [
                    // Upper Part
                    Container(
                      height: 300, // use constraints
                      decoration: const BoxDecoration(
                          borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(30),
                            bottomRight: Radius.circular(30),
                          ),
                          color: Colors.white,
                          boxShadow: [
                            BoxShadow(
                                color: Color(0xff919191),
                                offset: Offset.zero,
                                blurRadius: 10)
                          ]),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const Padding(
                            padding: EdgeInsets.only(top: 90),
                            child: Center(
                              child: CircleAvatar(
                                backgroundColor: Colors.transparent,
                                radius: 45,
                                backgroundImage:
                                    AssetImage('assets/images/logo.png'),
                              ),
                            ),
                          ),
                          TabBar(
                            controller: tabController,
                            labelColor: Colors.black,
                            indicatorColor: const Color(0xffFA4A0C),
                            indicatorPadding:
                                const EdgeInsets.only(left: 38, right: 38),
                            labelStyle: GoogleFonts.lato(
                                fontSize: 20, fontWeight: FontWeight.w600),
                            tabs: const [
                              Tab(
                                text: "Login",
                              ),
                              Tab(
                                text: "Sign-Up",
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                    // Lower Part

                    Container(
                      height: constraints.maxHeight - 300,
                      margin: const EdgeInsets.only(top: 40),
                      padding: const EdgeInsets.symmetric(horizontal: 50),
                      child: TabBarView(
                        controller: tabController,
                        children: [LoginPage(), Sign_up()],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          )),
    );
  }
}

【讨论】：