Question

错误：视口在横轴上扩展以填充其容器，并约束其子代以使其在横轴上的范围匹配。在这种情况下，水平视口将获得无限量的垂直空间用于扩展。

当我用容器包装TabBarView并提供特定的高度时，这不会出错。
但是我需要根据ListViewBuilder进行扩展的容器。

import 'package:flutter/material.dart';

class classA extends StatefulWidget {
  @override
  _classAState createState() => _classAState();
}

class _classAState extends State<classA> {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
          Row(
            children: <Widget>[
              Container(
                margin: EdgeInsets.all(kDefaultPadding),
                height: 40,
                width: MediaQuery.of(context).size.width - 80,
                child: TabBar(
                  controller: _tabController,
                  labelColor: Colors.white,
                  indicatorSize: TabBarIndicatorSize.tab,
                  unselectedLabelColor: Colors.black,
                  indicator: BoxDecoration(color: kSecondaryColor),
                  tabs: <Widget>[Text('A'), Text('B'), Text('C')],
                ),
              )
            ],
          ),
          TabBarView(controller: _tabController, children: <Widget>[
            ListView.builder(
                controller: ScrollController(),
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                itemCount: 7,
                itemBuilder: (context, index) => _ACard()),
            ListView.builder(
                controller: ScrollController(),
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                itemCount: 5,
                itemBuilder: (context, index) => _BCard()),
            ListView.builder(
                controller: ScrollController(),
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                itemCount: 8,
                itemBuilder: (context, index) => _CCard())
          ])
        ]));
  }
}

Answer 1

它使用CustomScrollView和SliverList

这是我的代码

return CustomScrollView(
  slivers: <Widget>[
    StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance.collection(_id).snapshots(),
        builder:
            (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) =>
                SliverList(
                    delegate: SliverChildBuilderDelegate(
                  (context, index) =>
                      customCardList(snapshot.data.documents, index),
                  childCount:
                      snapshot.hasData ? snapshot.data.documents.length : 0,
                ))),
    StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance.collection('festival$_id').snapshots(),
        builder:
            (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) =>
                SliverList(
                    delegate: SliverChildBuilderDelegate(
                  (context, index) =>
                      customMyCardList(snapshot.data.documents, index),
                  childCount:
                      snapshot.hasData ? snapshot.data.documents.length : 0,
                ))),
  ],
);

Answer 2

嘿，尝试用Flex()而不是Container包装TabBarView

Flex(
  fit: Flexfit.loose,
  child: TabBarView(
    //etc
  ),),

如何修复水平视口的高度不受限制

2 个答案: