Question

Flutter是一个相当新的框架，因此对简单任务的帮助不大。我具体要问的是如何将Card小部件添加到Column小部件。下面提供了源代码，以帮助解释我的意思。

假设我有一个创建新卡的功能，如下所示：

buildRow(barcode, letter, name, price) {
  return new Card(
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new ListTile(
          leading: new CircleAvatar(
            child: new Text(letter),
          ),
          title: new Text(name),
          subtitle: new Text("\$" + price),
          trailing: new Text(
            "x1",
            style: new TextStyle(color: Colors.lightBlue),
            textScaleFactor: 1.2,
          ),
        ),
      ],
    ),
  );
}
var snack = buildRow("091918229292", "C", "Crackers", "\$4.00");
var fruit = buildRow("091928229292", "P", "Pomegranate", "\$2.00");
var juice = buildRow("091948229292", "K", "Kiwi Juice", "\$20.00");

我有以下屏幕/页面：

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

class HomePage extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[

    ]);
  }
}

让我们说所有提供的代码都在同一个文件中。如何在主屏幕的Column小部件的子项中添加'snack'，'fruit'和'juice'？

Answer 1

如果您手动更新来源，这是一个基本示例。

      Column(
        children: _createChildren(),
      )

///////

这是创建您提供给colum

的小部件列表的方法

  List<int> someList = [1, 2, 3, 4, 5];
  List<Widget> _createChildren() {
    return new List<Widget>.generate(someList.length, (int index) {
      return Text(someList[index].toString());
    });
  }

//////

因此，当您更新列表时，请在setState

中进行更新

  void _somethingHappens() {
    setState(() {
      someList.add(6);
    });
  }

现在，如果您从流中收到数据，则可以检查StreamBuilder，或者它是否来自Future，您可以使用FutureBuilder。

此示例也可以在常规Builder

中完成

Answer 2

class SearchCat extends StatelessWidget {
  final List<Widget> list;
  final ValueChanged onChange;

  SearchCat({this.list, this.onChange}): super();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: list.map((v) {
          return Container(
            child: v,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(57.0),
              border: Border.all(width: 1.0, color: const Color(0xff707070)),
            ),
          );
        }).toList()
      )
    );
  }
}

我们可以使用List.map填充小部件列表。

以下是示例如何使用它。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SearchCat(list: [
        Text('Hello, World!', style: Theme.of(context).textTheme.headline4),
        Text('Hello, World!', style: Theme.of(context).textTheme.headline4),
        Text('Hello, World!', style: Theme.of(context).textTheme.headline4),
      ]
    );
  }
}

您可以将其粘贴到（Flutter Dartpad

Answer 3

你应该可以这样做：

class HomePage extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[
       buildRow("091918229292", "C", "Crackers", "\$4.00"),
       buildRow("091928229292", "P", "Pomegranate", "\$2.00"),
       buildRow("091948229292", "K", "Kiwi Juice", "\$20.00"),
    ]);
  }
}

如果你真的想保留你可以做的参考：

class HomePage extends State<Home> {
  var snack;
  var fruit;
  var juice;

  @override
  void initState() {
    super.initState();

    snack = buildRow("091918229292", "C", "Crackers", "\$4.00");
    fruit = buildRow("091928229292", "P", "Pomegranate", "\$2.00");
    juice = buildRow("091948229292", "K", "Kiwi Juice", "\$20.00");
  }

  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[
      snack, 
      fruit, 
      juice,
    ]);
  }
}

Answer 4

好的，我已经解决了我的问题，我所做的是创建一个新列表，如下所示：

List<Widget> v = [];

并将此列表作为身体的孩子，如下：

class HomePage extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return new Column(children: v);
  }
}

之后我创建了一个像这样追加的函数：

buildRow(barcode, letter, name, price) {
  v.add(new Card(
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new ListTile(
          leading: new CircleAvatar(
            child: new Text(letter),
          ),
          title: new Text(name),
          subtitle: new Text("\$" + price),
          trailing: new Text(
            "x1",
            style: new TextStyle(color: Colors.lightBlue),
            textScaleFactor: 1.2,
          ),
        ),
      ], 
    ),
  ));
}

最后我使用setState函数将更改应用到屏幕。

Answer 5

在列中，您可以像这样通过地图添加子项：

Column(
  children: List<Widget>.generate(length, (index) {
    return Container(
      child: Text('$index')
    );
  })
)

如何动态附加到Flutter中的Column小部件的子节点

5 个答案: