在 flutter 中使用 TabBarView() 将底部溢出 xxx 像素

Question

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

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

1. 高度：double.maxFinite
2. 高度：MediaQuery.of(context).size.height
3. 双无限

我的代码如下

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()
                ],
              ),
            ),
          )
        ],
      ),
    ),
  ],
);}

Answer 1

用扩展示例包装您的容器：

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

更多信息在这里