将 Choicechip 小部件与 Cupertino 应用程序一起使用答案

【问题标题】：Using Choicechip widget with Cupertino App将 Choicechip 小部件与 Cupertino 应用程序一起使用
【发布时间】：2020-02-22 07:19:05
【问题描述】：

我正在尝试在 Cupertino 应用程序中使用 ChoiceChip 小部件。

我在 GitHub 上找到了这个解决方案 https://github.com/flutter/flutter/issues/21872#issuecomment-421508939

CupertinoApp(
  localizationsDelegates: const <LocalizationsDelegate<dynamic>>[
      DefaultMaterialLocalizations.delegate,
      DefaultWidgetsLocalizations.delegate,
  ],
  title: 'Flutter Demo',
  home: new MyHomePage(title: 'Flutter Demo Home Page'),
)

这是我的代码

return CupertinoApp(
  localizationsDelegates: const <LocalizationsDelegate<dynamic>>[
    DefaultWidgetsLocalizations.delegate,
  ],
  home: CupertinoStoreHomePage(),
);

  _buildChoiceList() {
    List<Widget> choices = List();
    widget.reportList.forEach((item) {
      choices.add(Container(
        child: ChoiceChip(
          label: Text(item),
          selected: selectedChoice == item,
          onSelected: (selected) {
            setState(() {
              selectedChoice = item;
              widget.onChoiceSelected(item);
            });
          },
        ),
      ));
    });
    return choices;
  }

我得到了这个错误

════════小部件库捕获的异常═════════════════════════════════════ ═ 在构建 ChoiceChip(dirty) 时抛出了以下断言：未找到 Material 小部件。

ChoiceChip 小部件需要 Material 小部件祖先。

【问题讨论】：

标签： flutter flutter-cupertino

【解决方案1】：

您可以使用Material 换行Column
完整的工作代码和演示请见下文

代码sn-p

@override
Widget build(BuildContext context) {
    return Material(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: _buildChoiceList(),
    ));
  }

完整代码

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      localizationsDelegates: const <LocalizationsDelegate<dynamic>>[
        DefaultMaterialLocalizations.delegate,
        DefaultWidgetsLocalizations.delegate,
      ],
      home: CupertinoStoreHomePage(
        reportList: ["a", "b"],
        onChoiceSelected: (item) {
          print(item);
        },
      ),
    );
  }
}

class CupertinoStoreHomePage extends StatefulWidget {
  List<String> reportList;
  Function(String) onChoiceSelected;

  CupertinoStoreHomePage({Key key, this.reportList, this.onChoiceSelected})
      : super(key: key);
  @override
  _CupertinoStoreHomePageState createState() => _CupertinoStoreHomePageState();
}

class _CupertinoStoreHomePageState extends State<CupertinoStoreHomePage> {
  String selectedChoice;

  @override
  Widget build(BuildContext context) {
    return Material(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: _buildChoiceList(),
    ));
  }

  _buildChoiceList() {
    List<Widget> choices = [];
    widget.reportList.forEach((item) {
      choices.add(Container(
        child: ChoiceChip(
          label: Text(item),
          selected: selectedChoice == item,
          onSelected: (selected) {
            setState(() {
              selectedChoice = item;
              widget.onChoiceSelected(item);
            });
          },
        ),
      ));
    });
    return choices;
  }
}

输出

I/flutter (10201): a
I/flutter (10201): b

【讨论】：