如何在 Flutter 中构建 2 个内衬 ListView.builder

如何解决如何在 Flutter 中构建 2 个内衬 ListView.builder

谁能解释我如何使用 2 行项目将小部件构建为 ListView 构建器。我有一个这种类型的例子，你可以通过下图查看：

解决方法

这个片段应该对你有帮助。 您可以在 https://dartpad.dev/028daa76945938f0e5c14aea6a8bf84b?null_safety=true

尝试

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 500.0,child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,children: ['English','Russian','Spanish']
                .map((language) => LanguageButton(
                      language: language,))
                .toList(),),SizedBox(height: 20,Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,children: ['Some really long language','French','German']
                .map((language) => LanguageButton(
                      language: language,],);
  }
}

class LanguageButton extends StatelessWidget {
  final String language;

  const LanguageButton({Key? key,required this.language}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      style: OutlinedButton.styleFrom(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(30),onPressed: () {
        // TODO
      },child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20.0,vertical: 8.0),child: Text(language),);
  }
}

我使用了 Column 而不是 ListView.builder。也许这足以满足您的需要。要点是将每一行作为 Row 并将 mainAxisAlignment 设置为 spaceBetween。

,

一个选项是使用方向设置为水平的 Wrap 小部件。

@override
Widget build(BuildContext context) {
  final lorem = [
    'accusamus','dignissimos','ducimus','blanditiis','praesentium','voluptatum'
  ];

  return Container(
    height: 100,width: 250,child: Wrap(
      direction: Axis.horizontal,children: List.generate(
        lorem.length,(index) => Padding(
          padding: const EdgeInsets.all(8.0),child: Text(lorem[index]),);
}