如何在Flutter中将值传递给数组内的小部件

时间:2019-12-29 12:25:46

标签: flutter

我在Flutter中有这个数组/列表,其中包含一些简单的小部件:

itemBuilder: (BuildContext context, int index) {
   return steps[index];
}

我可以像这样显示所有这些内容:

itemBuilder

但是如何将值从Widget step0 build(String something) {} 传递到其中一个小部件?

{html_options class="form-control select2-render" id="category" name="category" data-search="true" options=$categorylist selected=$selectedcategory}

3 个答案:

答案 0 :(得分:1)

如果我得到了您,这就是您要实现的目标,您需要列出Function而不是Widget的列表:

class _MyHomePageState extends State<MyHomePage> {
  List<Function> steps;

  @override
  void initState() {
    steps = [
      _step0,
      _step1,
      _step2,
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: ListView.builder(
          itemCount: steps.length,
          itemBuilder: (BuildContext context, int index) {
            return steps[index](somethinng: "something");
          },
        ),
      ),
    );
  }

  Widget _step0({String somethinng}) {
    return Container(child: Text(somethinng ?? "anything"));
  }

  Widget _step1({String somethinng}) {
    return Container(child: Text(somethinng ?? "anything"));
  }

  Widget _step2({String somethinng}) {
    return Container(child: Text(somethinng ?? "anything"));
  }
}

如果您可以通过一种方法(不使用step0step1,...)来调整自己的方案,则可以尝试以下类似方法或了解一下,并对方案进行一些更改:

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: ListView(
          children: List.generate(10, (int index) {
            return ParentWidget(
              data: index,
              function: () => print("whooo! $index"),
              child: Text(index.toString(), style: TextStyle(fontSize: 20)),
            );
          }),
        ),
      ),
    );
  }
}

class ParentWidget extends StatefulWidget {
  final Widget child;
  final int data;
  final Function function;

  ParentWidget({this.child, this.data, this.function});

  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  @override
  void initState() {
    print(widget.data);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: widget.function,
      child: Container(
        child: (widget.child != null) ? widget.child : SizedBox(),
      ),
    );
  }
}

如果您有大量数据,请不要使用,List.generate()像现在一样使用ListView.builder

如果这不是您想要的内容,请让我知道以删除此答案。

答案 1 :(得分:1)

我解决了它,只是更改为返回小部件的功能列表。在您的情况下,您需要:

final List<Function> steps = [
  (input) => _step0(input),
  (input) => _step1(input),
  (input) => _step2(input),
];

然后,当您对其进行循环时,只需将参数传递给构造函数即可:

itemBuilder: (BuildContext context, int index) {
   return steps[index](input);
}

答案 2 :(得分:0)

您的意思是这样的吗?:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _myListView(context);
  }
}

Widget _myListView(BuildContext context) {
  final List<Widget> steps = [
    _step0(1),
    _step1(2),
    _step2(3),
  ];

  return ListView.builder(
    itemCount: steps.length,
    itemBuilder: (BuildContext context, int index) {
      return steps[index];
    },
  );
}

_step0(int number) {
  print(number);
}

_step1(int number) {
  print(number);
}

_step2(int number) {
  print(number);
}