flutter - 将 Choicechip 小部件与 Cupertino 应用程序一起使用

Question

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

我在 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): No Material 小部件时被抛出。

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

Answer 1

您可以使用Material包装Column
完整的工作代码和演示，请参见下文

代码片段

@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