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

Question

我正在尝试在 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 小部件祖先。

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

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

Using Choicechip widget with Cupertino App

flutter

flutter-cupertino