在 ListView 中具有不同小部件的 Flutter 抽象类

Question

我正在尝试弄清楚如何显示包含混合项目的 ListView 。我不知道如何显示列表项。请考虑以下代码。这应该会直接运行(除了现在第 82 行的错误。

我创建了一个抽象类、一个实现文本区域的类和一个实现按钮区域的类。我将它们混合在一起，因为这将是数据流入的方式。随机。

所以我可以构建混合类，我只是不知道如何在屏幕上进行最终显示。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

abstract class  MixedWidgets{
  //Different type of widgets I want to mix randomly;
  Widget buildText(BuildContext context);
  Widget buildButton(BuildContext context);
}

//this should show some text
class TextClass implements MixedWidgets{
  Widget buildButton(BuildContext context) => null;

  TextClass({this.textStringToPrint});

  String textStringToPrint;

  Widget buildText(BuildContext context){
    return Container(
      child: Text(textStringToPrint),
    );
  }
}

//This should show a button
class ButtonClass implements MixedWidgets{
  Widget buildText(BuildContext context) => null;

  ButtonClass({this. buttonNumber});

  int buttonNumber;

  Widget buildButton(BuildContext context){
    return FlatButton(
        onPressed: null,
        child: Text('This is button number $buttonNumber'),
    );
  }
}

//List<MixedWidgets> myListOfMixedWidgets = [];
final firstN = ButtonClass(buttonNumber: 1);
final secondN = ButtonClass(buttonNumber: 2);
final thirdN = ButtonClass(buttonNumber: 3);
final fourthN = ButtonClass(buttonNumber: 4);
final fifthN = ButtonClass(buttonNumber: 5);

final firstT = TextClass(textStringToPrint: 'one');
final secondT = TextClass(textStringToPrint: 'two');
final thirdT = TextClass(textStringToPrint: 'three');
final fourthT = TextClass(textStringToPrint: 'four');



class MyApp extends StatelessWidget {
  //Mix up my different classes and widgets in here
  List<MixedWidgets> myListOfMixedWidgets = [
    firstN,
    secondN,
    firstT,
    thirdN,
    fourthN,
    secondT,
    thirdT,
    fourthT,
    fifthN,
  ];


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: Container(
          child: ListView(
            //How do I do this?  I need to show the mixed list here?
            children: myListOfMixedWidgets,
          ),
        ),
      )
    )
    );
  }
}

Answer 1

这里您要使用的策略是多态性。使用 StatelessWidget 和 StatefulWidget 的父类(super class) Widget 创建异构 Widget 列表 ( List<Widget> )。

如果 TextClass 和 ButtonClass 继承自 Widget 的某个后代，那么它们都可以添加到 widget 列表中。这适用于 ListView，因为它的 Children 参数只识别 Widget。

class TextClass extends StatelessWidget {
  const TextClass({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text("Text!");
  }
}

class ButtonClass extends StatelessWidget {
  const ButtonClass({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: null,
      child: Text("Button!");
    );
  }
}

final ButtonClass firstN = ButtonClass();
final TextClass firstT = TextClass();

class MyApp extends StatelessWidget {
  // Polymorphism here:
  List<Widget> myListOfMixedWidgets = [
    firstN,
    firstT,
  ];

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: myListOfMixedWidgets,
    );
  }
}