Question

感谢您阅读此问题。

我对dart / flutter还是陌生的，我正在尝试编写一些代码，以便我可以创建一个actDescriptions列表，其中有多个与它们相关的特征，显示了相关的特征。

再次感谢您。

 const ACTION_DATA = const [
    ActionOutput(
      id: 'a1',
      actDescription: 'Avoid caffeine 4 hours before going to bed for high quality sleep.',

      traits: [
        'T_CAFFEINE_INTAKE_BAND',
      ],

    ),
    ActionOutput(
      id: 'a2',
      actDescription: 'Avoid caffeine altogether if you struggle with falling asleep.',

      traits: [
        'T_CAFFEINE_INTAKE_BAND',
        'T_SLEEP_BAND',
      ],

    ),
    ActionOutput(
      id: 'a3',
      actDescription: 'Use caffeine to boost exercise performance.',

      traits: [
        'T_CAFFEINE_INTAKE_BAND',
      ],

    ),
    ActionOutput(
      id: 'a4',
      actDescription: 'If you have caffeine pre-workout, have it around 30-15 minutes before you train.',

      traits: [
        'T_CAFFEINE_INTAKE_BAND',
      ],

    ),
    ActionOutput(
      id: 'a5',
      actDescription: 'Don\'t use coffee as a \"pick me up\" during the day.',

      traits: [
        'T_CAFFEINE_INTAKE_BAND',
      ],

    ),
];

Answer 1

您可以使用ListView.builder构造函数来创建ActionOutput项目的可滚动列表。构造函数需要一个itemBuilder，它只是一个回调函数，可以为列表中的所需索引创建并返回一个新项。

在下面的示例中，我们使用ListView.builder并将项目小部件创建委托给_buildActionItem方法。

Widget _buildTraitItem(trait) {
  // this can be any widget to display a trait
  return Text(trait);
}

Widget _buildActionItem(ActionOutput action) {
  // create a new action item
  // this can be any widget, here we use a simple container with a single column
  // and a row for the traits

  // build a list of trait items
  final traits = action.traits.map(_buildTraitItem).toList();

  return Container(
    height: 50,
    child: Column(
      children: [
        Text(action.actDescription),
        Row(
            // use the list of items in this row
            children: traits
        )
      ]
    )
  );
}

@override
Widget build(BuildContext context) {  
  return ListView.builder(
    itemCount: ACTION_DATA.length,
    itemBuilder: (context, index) {
      // create an item for the requested index based on the item data
      return _buildActionItem(ACTION_DATA[index]);
    },
  );
}

有关如何创建列表的更多示例，请参见ListView documentation。

初学者问题镖/颤振：从列表中提取信息

1 个答案: