使用 SingleScrollBar

问题描述

我正在尝试使用 Pie Chart 库生成带有数据的 fl_chart，并使用 Column 和 Row 小部件显示在屏幕上。当我垂直显示多个图表时，我需要一个滚动条，因此我使用了 SingleChildScrollbar 小部件。

现在我面临的问题是我的最后几个项目无法正常显示。我尝试了许多不同的东西，例如 Expanded、Wrap 和 Flexible，但它们都不起作用，或者可能是我使用不当。

在下图中，您可以看到最后一个laend 无法正常显示（标记为红色）。

这是我的代码，它显示了来自 main 方法的三个图表

Scaffold(
        appBar: AppBar(
          title: Text('Widget Demo'),),body: SingleChildScrollView(
          child: Column(
            children: [
              PieChartWidget(
                indicatorDataList: IndicatorListData.dataOne,PieChartWidget(
                indicatorDataList: IndicatorListData.dataTwo,Text('Hi')
            ],

PieChartWidget 回来了

Widget _buildPieChart(BuildContext context) {
    return Column(
      children: [
        Container(
          height: MediaQuery.of(context).size.height * 0.35,width: double.infinity,child: PieChart(
            PieChartData(
              sections: getPieChartSectionData(context),borderData: FlBorderData(
                show: false,sectionsspace: 5,centerSpaceRadius: 0,_buildLegends(context)
      ],);
  }
}

生成图例

Widget _buildLegends(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,children: List.generate(
        indicatorDataList.length,(index) {
          return Padding(
            padding: const EdgeInsets.all(8.0),child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,crossAxisAlignment: CrossAxisAlignment.center,mainAxisSize: MainAxisSize.max,children: [
                Container(
                  height: MediaQuery.of(context).size.height * 0.04,color: indicatorDataList[index].color,width: MediaQuery.of(context).size.width * 0.08,Container(
                  child: Text(indicatorDataList[index].text),width: MediaQuery.of(context).size.width * 0.15,Container(
                  height: MediaQuery.of(context).size.height * 0.03,child: Text(indicatorDataList[index].value.toString()),Container(
                  child: Text(indicatorDataList[index].subText),],);
        },);
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）