如何为包含扩展图块列表的标签栏视图赋予动态高度?

时间:2019-08-29 08:54:31

标签: flutter dart

我有Tabbarview,它需要修复垂直边界(因为它没有取无穷大)。那我怎么给动态高度呢?

请注意:标签栏包含扩展图块列表

我尝试给出固定高度,但这给了我溢出的空间。

class FaqScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => FaqScreenState();
}

class FaqScreenState extends BaseState<FaqScreen>
    with SingleTickerProviderStateMixin {
  TabController _controller;
  List<FaqCategory> faqCategories;
  int _index;

  @override
  void initState() {
    super.initState();
    faqCategories = DependencyInjector().dependency.getFaq();
    _controller = TabController(length: faqCategories.length, vsync: this);
    _controller.addListener(_setItemIndex);
    _index = 0;
  }

  void _setItemIndex() {
    setState(() {
      _index = _controller.index;
    });
  }

  @override
  Widget implementBuild(BuildContext context) {
    return AuthScreensWrapper(
      headlineText: "Frequently \nasked question",
      screenHeading: "Search your question",
      suffixIconPath: "$iconAssetsBasePath/ic_blue_search.svg",
      children: <Widget>[
        Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(
                top: screenUtil.setHeight(20.0),
                left: screenUtil.setWidth(15.0),
              ),
              child: _tabBar(),
            ),
            _tabBarView(),
          ],
        ),
      ],
    );
  }

  Widget _tabBar() {
    return TabBar(
        controller: _controller,
        isScrollable: true,
        labelPadding: EdgeInsets.symmetric(
          horizontal: screenUtil.setWidth(8.0),
        ),
        indicator: UnderlineTabIndicator(
          borderSide: BorderSide(width: 0.0, color: AppColors.whiteColor),
        ),
        tabs: <Widget>[
          for (int i = 0; i < faqCategories.length; i++) _buildTab(i),
        ]);
  }

  Widget _buildTab(int i) {
    if (i == _index)
      return Container(
        height: screenUtil.setHeight(40.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(25.0),
          color: AppColors.accentColor,
          //border: Border.all(color: AppColors.blueColor),
        ),
        child: Padding(
          padding: EdgeInsets.symmetric(
            horizontal: screenUtil.setWidth(10.0),
          ),
          child: Center(
            child: Text(
              faqCategories[i].categoryName,
              style: AppTextStyle.categoryWhiteTextStyle(screenUtil),
            ),
          ),
        ),
      );
    else
      return Container(
        height: screenUtil.setHeight(40.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(25.0),
          color: AppColors.whiteColor,
          border: Border.all(color: AppColors.blueColor),
        ),
        child: Padding(
          padding: EdgeInsets.symmetric(
            horizontal: screenUtil.setWidth(10.0),
          ),
          child: Center(
            child: Text(
              faqCategories[i].categoryName,
              style: AppTextStyle.categoryBlackTextStyle(screenUtil),
            ),
          ),
        ),
      );
  }

  Widget _tabBarView() {
    return Container(
      height: MediaQuery.of(context).size.height,
      child: Padding(
        padding: EdgeInsets.only(
          top: screenUtil.setHeight(10.0),
          left: screenUtil.setWidth(25.0),
          right: screenUtil.setWidth(25.0),
        ),
        child: TabBarView(
          controller: _controller,
          children: faqCategories
              .map(
                (faqCategory) => _buildTabView(faqCategory),
          )
              .toList(),
        ),
      )
    );
  }

  Widget _buildTabView(FaqCategory faqCategory) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(`enter code here`
            top: screenUtil.setHeight(15.0),
            bottom: screenUtil.setHeight(15.0),
          ),
          child: Text(
            faqCategory.categoryTitle,
            style: AppTextStyle.descriptionTextStyle(screenUtil),
          ),
        ),
        MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: ListView.builder(
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemCount: faqCategory.questions.length,
            itemBuilder: (BuildContext context, int index) {
              return _buildFaq(faqCategory.questions[index]);
            },
          ),
        )
      ],
    );
  }

  Widget _buildFaq(Question faq) {
    return ListTileTheme(
      contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
      child: ExpansionTile(
        title: Text(
          faq.question,
          style: AppTextStyle.questionTextStyle(screenUtil),
        ),
        trailing: SvgIcon.getSvgIcon(
            "$iconAssetsBasePath/ic_down_blue_arrow.svg",
            screenUtil,
            12.0,
            12.0),
        children: <Widget>[
          Align(
            alignment: Alignment.centerLeft,
            child: Text(
              faq.answer,
              style: AppTextStyle.answerTextStyle(screenUtil),
            ),
          ),
        ],
      ),
    );
  }
}
I/flutter (31165): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (31165): The following assertion was thrown during layout:
I/flutter (31165): A RenderFlex overflowed by 11 pixels on the bottom.
I/flutter (31165): </br>
I/flutter (31165): The overflowing RenderFlex has an orientation of Axis.vertical.</br>
I/flutter (31165): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and</br>
I/flutter (31165): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.</br>
I/flutter (31165): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the</br>
I/flutter (31165): RenderFlex to fit within the available space instead of being sized to their natural size.</br>
I/flutter (31165): This is considered an error condition because it indicates that there is content that cannot be</br>
I/flutter (31165): seen. If the content is legitimately bigger than the available space, consider clipping it with a</br>
I/flutter (31165): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (31165): like a ListView.
I/flutter (31165): The specific RenderFlex in question is: RenderFlex#6616d OVERFLOWING:
I/flutter (31165):   needs compositing
I/flutter (31165):   creator: Column ← KeyedSubtree-[<0>] ← RepaintBoundary ← IndexedSemantics ←
I/flutter (31165):     NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree-[Key
I/flutter (31165):     <[<0>]>] ← SliverFillViewport ← Viewport ← IgnorePointer-[GlobalKey#d8ead] ← Semantics ← ⋯
I/flutter (31165):   parentData: <none> (can use size)
I/flutter (31165):   constraints: BoxConstraints(w=414.0, h=928.7)
I/flutter (31165):   size: Size(414.0, 928.7)
I/flutter (31165):   direction: vertical
I/flutter (31165):   mainAxisAlignment: start
I/flutter (31165):   mainAxisSize: max
I/flutter (31165):   crossAxisAlignment: start
I/flutter (31165):   textDirection: ltr
I/flutter (31165):   verticalDirection: down
I/flutter (31165): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter (31165): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (31165): Another exception was thrown: A RenderFlex overflowed by 32 pixels on the bottom.

0 个答案:

没有答案