Flutter：ListView.builder 创建列

Posted 2023-02-23

【中文标题】Flutter：ListView.builder 创建列

【英文标题】：Flutter: ListView.builder create columns

【发布时间】：2018-12-10 23:37:13

【问题描述】：

我正在为一些计数游戏开发一个颤振应用程序。我试图让它工作，一个 ListView.builder 在一列中显示两个项目，在另一列中显示另外两个项目。但我不知道该怎么做。有什么建议吗？

这是我的代码：

import 'dart:math';
import 'package:flutter/material.dart';

class Teams extends StatefulWidget
  final String spieler1;
  final String spieler2;
  final String spieler3;
  final String spieler4;

  Teams(Key key, this.spieler1, this.spieler2, this.spieler3, this.spieler4) : super(key : key);

  @override
  State<StatefulWidget> createState() => new TeamsState();


class TeamsState extends State<Teams>
  @override
  Widget build(BuildContext context) 
    var namen = [widget.spieler1, widget.spieler2, widget.spieler3, widget.spieler4];
    List<String> erstellt = shuffle(namen);

    return new Scaffold(
      appBar: new AppBar(
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shuffle),
            onPressed: ()setState(() ); 
          ),
        ],
      ),
      body: new  ListView.builder(
              itemCount: namen.length,
              itemBuilder: (BuildContext context, int index)
                return new ListTile(
                  title: new Text(erstellt[index]), // <-- content is loading here
                );
              
          ),
    );
  

  List shuffle(List items) 
    var random = new Random();

    // Go through all elements.
    for (var i = items.length - 1; i > 0; i--) 

      // Pick a pseudorandom number according to the list length
      var n = random.nextInt(i + 1);

      var temp = items[i];
      items[i] = items[n];
      items[n] = temp;
    

    return items;
  

【问题讨论】：

你能放一张你想要做什么的截图吗？

【参考方案1】：

我认为您所描述的就是 Flutter 中所谓的 GridView。要实现两列，这是您可以执行的示例：

GridView.count(
  // crossAxisCount is the number of columns
  crossAxisCount: 2,
  // This creates two columns with two items in each column
  children: List.generate(2, (index) 
    return Center(
      child: Text(
        'Item $index',
        style: Theme.of(context).textTheme.headline,
      ),
    );
  ),
);

您可以在 Flutter 的网站上阅读更多相关信息：https://flutter.io/cookbook/lists/grid-lists/

【讨论】：

非常感谢，你让我开心！