0

我正在使用PieChartfl_chart来显示本地保存文档的分布情况。图表中显示的百分比是两个文档类型列表长度的结果（见下图）。
但是当一个列表为空时，我有一个奇怪的错误，即我的自定义图例被向下推。ThePieChart和 Legend 位于 Row 的内部，每个子项都有弹性因子（2 代表 the PieChart，4 代表 Legend）。
我真的不明白是什么将 Legend 向下推，因为我的Expanded小部件始终位于其中，Rows因此PieChart和 Legend 只占用可用的水平空间，而不是错误中发生的垂直空间（图 2）。

饼图小部件：

class PersonalFilesCircularGraph extends StatefulWidget {
  const PersonalFilesCircularGraph();

  @override
  _PersonalFilesCircularGraphState createState() =>
      _PersonalFilesCircularGraphState();
}

class _PersonalFilesCircularGraphState
    extends State<PersonalFilesCircularGraph> {
  late List<FileTypeData> data;

  List<PieChartSectionData> getSections() => data
      .asMap()
      .map<int, PieChartSectionData>((index, data) {
        final value = PieChartSectionData(
          color: data.color,
          value: data.percent,
          showTitle: false,
          radius: 3,
        );

        return MapEntry(index, value);
      })
      .values
      .toList();

  @override
  void initState() {
/* Example getFileTypeData result
[
  FileTypeData(
    "Patient Questionnaire",
    patientQuestionnaires.length /
        (patientQuestionnaires.length +
            receivedPatientQuestionnaires.length) *
        100,
    const Color(0xFF3861FB),
  ),
  FileTypeData(
    "Received Patient Questionnaire",
    receivedPatientQuestionnaires.length /
        (receivedPatientQuestionnaires.length +
            patientQuestionnaires.length) *
        100,
    Colors.teal.shade400,
  ),
]; 
*/
    data = context.read<SessionBloc>().state.getFileTypeData;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<SessionBloc, SessionState>(
      listenWhen: (previous, current) {
        final bool listenWhen = previous.patientQuestionnaires.length !=
                current.patientQuestionnaires.length ||
            previous.receivedPatientQuestionnaires.length !=
                current.receivedPatientQuestionnaires.length;
        return !listenWhen;
      },
      listener: (context, state) {
        data = context.read<SessionBloc>().state.getFileTypeData;
      },
      builder: (context, state) {
        return Row(
          children: [
            Expanded(
              flex: 2,
              child: Container(
                constraints: const BoxConstraints(
                  maxWidth: 60,
                  maxHeight: 60,
                ),
                child: PieChart(
                  PieChartData(
                    sections: getSections(),
                  ),
                ),
              ),
            ),
            const SizedBox(
              width: kMediumPadding,
            ),
            Expanded(
              flex: 4,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: data
                    .map(
                      (data) => Padding(
                        padding: const EdgeInsets.symmetric(vertical: 4),
                        child: buildLegend(
                          percent: data.percent,
                          text: data.fileName == "Patient Questionnaire"
                              ? L.of(context).patientQuestionnaires
                              : L.of(context).receivedPatientQuestionnaire,
                          color: data.color,
                        ),
                      ),
                    )
                    .toList(),
              ),
            ),
          ],
        );
      },
    );
  }

  Widget buildLegend({
    required double percent,
    required String text,
    required Color color,
  }) =>
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Row(
              children: [
                Container(
                  width: 10,
                  height: 10,
                  color: color,
                ),
                const SizedBox(
                  width: kSmallPadding,
                ),
                Expanded(
                  child: Text(
                    text,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
          Text(
            "${percent.toStringAsFixed(0)}%",
            overflow: TextOverflow.ellipsis,
          )
        ],
      );
}

我将图表小部件显示在 a中，并用主屏幕内部的aCustomScrollView包裹：SliverToBoxAdapter

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      physics: const BouncingScrollPhysics(),
      slivers: <Widget>[
        SliverAppBar(
          elevation: 0.0,
          floating: true,
          backgroundColor: Theme.of(context).scaffoldBackgroundColor,
          title: Text(
            "Home",
            style: Theme.of(context).textTheme.headline5,
          ),
          centerTitle: true,
        ),
        const SliverPadding(
          padding: EdgeInsets.symmetric(
            vertical: kSmallPadding,
            horizontal: kMediumPadding,
          ),
          sliver: SliverToBoxAdapter(
            child: PersonalFilesCircularGraph(),
          ),
        )
      ],
    );
  }
}

在此处输入图像描述 在此处输入图像描述

编辑：

我只是对这个错误进行了更多调查，并Container在我的CustomScrollView, 下方放置了一个彩色SliverPadding，CircularGraph以检查标签列是否向下扩展。但正如您所见，彩色 Container 不受影响。看起来 Legend 位于 a 内部Stack并定位，不会影响上方和下方的其他小部件。

const SliverPadding(
  padding: EdgeInsets.symmetric(
    vertical: kSmallPadding,
    horizontal: kMediumPadding,
  ),
  sliver: SliverToBoxAdapter(
    child: PersonalFilesCircularGraph(),
  ),
),
SliverToBoxAdapter(
  child: Container(
    width: double.infinity,
    height: 60,
    color: Colors.green,
  ),
)

在此处输入图像描述

4

0 回答 0