在颤动中使用 TabBarView() 底部溢出 xxx 像素答案

【问题标题】：Bottom overflowed by xxx pixel using TabBarView() in flutter在颤动中使用 TabBarView() 底部溢出 xxx 像素
【发布时间】：2022-08-03 04:52:06
【问题描述】：

我有 2 列顶部是简单容器，底部是 TabBarView() 我想要实现的是 tabbarview() 结果可以使用 singlechildscrollview() 和动态高度，我的问题是底部溢出 xxx 个像素

我尝试了以下但不起作用。

高度：double.maxFinite
高度：MediaQuery.of(context).size.height

double.infinity

我的代码如下

Widget build(BuildContext context) {
return Column(
  children: [
    const SizedBox(
      height: 20,
    ),
    Container(
      width: MediaQuery.of(context).size.width * 0.8,
      padding: const EdgeInsets.fromLTRB(14.0, 20.0, 14.0, 20.0),
      decoration: BoxDecoration(
        border: Border.all(
          color: const Color(0xffE6E6E6),
          width: 1,
        ),
        color: primaryAppbarColor,
        borderRadius: const BorderRadius.all(
          Radius.circular(15),
        ),
      ),
      child: Column(
        children: [
          const Text(
            \"Second Installment\",
            style: TextStyle(
              fontSize: 16,
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          const Text(
            \"BHD 1,180\",
            style: TextStyle(
              fontSize: 28,
              fontWeight: FontWeight.bold,
              color: Color(0xFF000000),
            ),
          ),
          const Text(
            \"Current Due Date: August 31, 2022\",
            style: TextStyle(
              fontSize: 14,
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              primary: const Color(0xFF0094FF),
              onPrimary: Colors.white,
              fixedSize: const Size(260, 50),
            ),
            child: const Text(\'Pay Now\'),
            onPressed: () async {},
          ),
          const SizedBox(
            height: 20,
          ),
          SvgPicture.asset(
            \'assets/images/creditmax.svg\',
            width: 130.0,
          ),
        ],
      ),
    ),
    const SizedBox(
      height: 20,
    ),
    DefaultTabController(
      length: 3, // length of tabs
      initialIndex: 0,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: const <Widget>[
          TabBar(
            labelColor: Colors.green,
            unselectedLabelColor: Colors.black,
            tabs: [
              Tab(text: \'School Fees\'),
              Tab(text: \'Other Fees\'),
              Tab(text: \'Transactions\'),
            ],
          ),
          SizedBox(
            height: 300,
            child: Expanded(
              child: TabBarView(
                children: <Widget>[
                  SchoolFees(),
                  OtherFees(),
                  TransactionFees()
                ],
              ),
            ),
          )
        ],
      ),
    ),
  ],
);}

用 SingleChildScrollView 包装您的 TabBarView。
嗨，亚伦，我做了，但它会显示白色的画布搞砸了..

标签： android ios flutter dart

【解决方案1】：

用扩展包装你的容器例子：

Widget build(BuildContext context) {
return Column(
  children: [
    const SizedBox(
      height: 20,
    ),
    Expanded(
      child:Container(
        ...
    );
}

更多信息here

【讨论】：