Flutter：TabBar 的选项卡是与其之前存在的重叠小部件

Question

正如标题所说，当屏幕尺寸较小时，选项卡栏会重叠在其前面的小部件

我已将统计数据封装在

Wrap

中的应用程序中，以便它们仍然可以在较小的屏幕尺寸中可见 现在我有一些要显示的多个图表，因此我将每个图表放在选项卡视图和选项卡栏中，其中包含用于查看图表的选项卡。当屏幕尺寸较小时，选项卡栏会出现（从屏幕截图#1 到屏幕截图#2）或与其之前的小部件重叠。 另外，如果有比我目前的方法更好的方法，请教育我。

屏幕截图#1：

屏幕截图#2：

选项卡定义：

List<Widget> tabs = [
                        const Tab(
                          icon: Icon(Icons.local_gas_station_outlined),
                          text: "Mileage",
                          iconMargin: EdgeInsets.only(bottom: 5),
                        ),
                        const Tab(
                          icon: Icon(Icons.pin_drop_outlined),
                          text: "Distance",
                          iconMargin: EdgeInsets.only(bottom: 5),
                        ),
                        const Tab(
                          icon: Icon(Icons.timer_outlined),
                          text: "Duration",
                          iconMargin: EdgeInsets.only(bottom: 5),
                        ),
                      ];

return Scaffold(
body: DefaultTabController(
                          initialIndex: defaultGraphTabIndex,
                          length: views.length,
                          child: SafeArea(
                            child: Scrollbar(
                              controller: _scrollController,
                              child: SingleChildScrollView(
                                controller: _scrollController,
                                child: Container(
                                  margin: const EdgeInsets.only(
                                      top: 18, left: 18, right: 18),
                                  child: Column(
                                    children: [
                                      // Stats Column:
                                      Column(
                                        children: [
                                          SizedBox(
                                            height: (MediaQuery.of(context)
                                                        .size
                                                        .height >=
                                                    MediaQuery.of(context)
                                                        .size
                                                        .width)
                                                ? MediaQuery.of(context)
                                                        .size
                                                        .height *
                                                    1 /
                                                    6
                                                : MediaQuery.of(context)
                                                        .size
                                                        .width *
                                                    1 /
                                                    6,
                                            child: Wrap(
                                              spacing: 16,
                                              children: [
                                                SizedBox(
                                                  width: double.maxFinite,
                                                  child: Wrap(
                                                      spacing: 8,
                                                      alignment: WrapAlignment
                                                          .spaceBetween,
                                                      children: [
                                                        Text(
                                                            "Total money spent during",
                                                            style:
                                                                semiBold18()),
                                                        SizedBox(
                                                          width:
                                                              double.maxFinite,
                                                          child: Wrap(
                                                            crossAxisAlignment:
                                                                WrapCrossAlignment
                                                                    .center,
                                                            alignment:
                                                                WrapAlignment
                                                                    .spaceBetween,
                                                            children: [
                                                              DropdownButton(
                                                                  value: dropDownItems[
                                                                      dropDownMenuItemIndex],
                                                                  items: dropDownItems
                                                                      .map(
                                                                          (value) {
                                                                    return DropdownMenuItem(
                                                                      value:
                                                                          value,
                                                                      child: Text(
                                                                          value),
                                                                    );
                                                                  }).toList(),
                                                                  onChanged:
                                                                      (_) {
                                                                    setState(
                                                                        () {
                                                                      dropDownMenuItemIndex =
                                                                          dropDownItems
                                                                              .indexOf(_!);
                                                                    });
                                                                  }),
                                                              Row(
                                                                mainAxisSize:
                                                                    MainAxisSize
                                                                        .min,
                                                                crossAxisAlignment:
                                                                    CrossAxisAlignment
                                                                        .center,
                                                                children: [
                                                                  Text(NumberFormat(
                                                                          "#,###.##")
                                                                      .format(
                                                                          moneySpent)),
                                                                  IconButton(
                                                                      onPressed:(){...}
                                                                      icon: const Icon(
                                                                          Icons
                                                                              .edit))
                                                                ],
                                                              )
                                                            ],
                                                          ),
                                                        ),
                                                      ]),
                                                )
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                      SizedBox(
                                        height:
                                            MediaQuery.of(context).size.height *
                                                5 /
                                                12,
                                        child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: [
                                            TabBar(
                                              tabs: tabs,
                                              isScrollable: true,
                                              tabAlignment: TabAlignment.center,
                                            ),
                                            Expanded(
                                              child: ConstrainedBox(
                                                constraints: BoxConstraints(
                                                    minHeight:
                                                        MediaQuery.of(context)
                                                                .size
                                                                .height /
                                                            4),
                                                child: TabBarView(
                                                  children: views,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      const SizedBox(
                                        height: 20,
                                      ),)```

Answer 1

灵活的小部件包裹在选项卡栏周围，使其仅占用必要的空间。 Expanded 小部件包裹在选项卡栏视图周围，以确保它占据选项卡栏下方的剩余空间。 这是例子......

return Scaffold(
    body: DefaultTabController(
                              initialIndex: defaultGraphTabIndex,
                              length: views.length,
                              child: SafeArea(
                                  child: SingleChildScrollView(
                                    controller: _scrollController,
                                    child: Container(
                                      margin: const EdgeInsets.only(
                                          top: 18, left: 18, right: 18),
                                      child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
                                        children: [
                                          // Stats Column:
                                          Column(
                                            children: [
                                              SizedBox(
                                                height: (MediaQuery.of(context)
                                                            .size
                                                            .height >=
                                                        MediaQuery.of(context)
                                                            .size
                                                            .width)
                                                    ? MediaQuery.of(context)
                                                            .size
                                                            .height *
                                                        1 /
                                                        6
                                                    : MediaQuery.of(context)
                                                            .size
                                                            .width *
                                                        1 /
                                                        6,
                                                child: Wrap(
                                                  spacing: 16,
                                                  children: [
                                                    SizedBox(
                                                      width: double.maxFinite,
                                                      child: Wrap(
                                                          spacing: 8,
                                                          alignment: WrapAlignment
                                                              .spaceBetween,
                                                          children: [
                                                            Text(
                                                                "Total money spent during",
                                                                style:
                                                                    semiBold18()),
                                                            SizedBox(
                                                              width:
                                                                  double.maxFinite,
                                                              child: Wrap(
                                                                crossAxisAlignment:
                                                                    WrapCrossAlignment
                                                                        .center,
                                                                alignment:
                                                                    WrapAlignment
                                                                        .spaceBetween,
                                                                children: [
                                                                  DropdownButton(
                                                                      value: dropDownItems[
                                                                          dropDownMenuItemIndex],
                                                                      items: dropDownItems
                                                                          .map(
                                                                              (value) {
                                                                        return DropdownMenuItem(
                                                                          value:
                                                                              value,
                                                                          child: Text(
                                                                              value),
                                                                        );
                                                                      }).toList(),
                                                                      onChanged:
                                                                          (_) {
                                                                        setState(
                                                                            () {
                                                                          dropDownMenuItemIndex =
                                                                              dropDownItems
                                                                                  .indexOf(_!);
                                                                        });
                                                                      }),
                                                                  Row(
                                                                    mainAxisSize:
                                                                        MainAxisSize
                                                                            .min,
                                                                    crossAxisAlignment:
                                                                        CrossAxisAlignment
                                                                            .center,
                                                                    children: [
                                                                      Text(NumberFormat(
                                                                              "#,###.##")
                                                                          .format(
                                                                              moneySpent)),
                                                                      IconButton(
                                                                          onPressed:(){...}
                                                                          icon: const Icon(
                                                                              Icons
                                                                                  .edit),
),
                                                                    ],
                                                                  ),
                                                                ],
                                                              ),
                                                            ),
                                                          ],),
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ],
                                          ),
                                          SizedBox(
                                            height:
                                                MediaQuery.of(context).size.height *
                                                    5 /
                                                    12,
                                            child: Column(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              children: [
                                                TabBar(
                                                  tabs: tabs,
                                                  isScrollable: true,
                                                  tabAlignment: TabAlignment.center,
                                                ),
                                                Expanded(
                                                  child: ConstrainedBox(
                                                    constraints: BoxConstraints(
                                                        minHeight:
                                                            MediaQuery.of(context)
                                                                    .size
                                                                    .height /
                                                                4),
                                                    child: TabBarView(
                                                      children: views,
                                                    ),
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                          const SizedBox(
                                            height: 20,
                                          ),)