如何将 Item 的顺序随机化到 ListView.builder答案

【问题标题】：How to randomize order of Item into ListView.builder如何将 Item 的顺序随机化到 ListView.builder
【发布时间】：2021-02-16 20:56:13
【问题描述】：

我有我的 ListView.builder，每次用户登陆列表所在的屏幕时，它都必须随机化。我想使用 initState 但我不知道如何。这是我的代码：

return Container(
      height: 380,
      child: ListView.builder(
        controller: controller,
        itemCount: messages.length + 1,
        itemBuilder: (BuildContext context, int index) {
          if (index == messages.length) {
            return SizedBox(
              height: 50,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  IconButton(
                    icon: Icon(FontAwesomeIcons.fastBackward,color: Colors.yellow,size: 35,),
                    onPressed: (){
                      onTap(int, index);
                    },
                  ),
                ],
              ),
            );
          }

有什么帮助吗？

【问题讨论】：

标签： flutter

【解决方案1】：

• 让你的类有状态

• 在构建方法之前调用 initState 方法，如下所示：

  void initState() {
    messages.shuffle();
    super.initState();
  }

• 保持您的 listView.Builder 不变。

【讨论】：

只有当我删除模拟器并重新创建一个新模拟器时，我才会看到 initState 发生变化，如何在每次打开应用程序时通过随机播放输入这个？
你不需要删除模拟器，只需从后台关闭应用程序并再次打开它。

【解决方案2】：

请尝试下面的代码，我从https://stackoverflow.com/a/62142484/10059211找到的

import 'dart:math';

import 'package:flutter/material.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Color.fromARGB(255, 18, 32, 47)),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

class _HomePageState extends State<HomePage> {
  final _random = new Random();
  var data = [
    'T 0',
    'T 1',
    'T 2',
    'T 3',
    'T 4',
    'T 5',
    'T 6',
    'T 7',
    'T 8',
    'T 9',
    'T 10',
    'T 11',
    'T 12',
    'T 13',
    'T 14',
    'T 15',
    'T 16',
    'T 17',
    'T 18',
    'T 19',
  ];

  var listToShow = [];
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Container(
          height: 75,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(left: 28.0),
                icon: Icon(Icons.refresh),
                onPressed: () {
                  setState(() {
                    updateDataInList();
                  });
                },
              ),
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(right: 28.0),
                icon: Icon(Icons.all_inclusive),
                onPressed: () {
                  setState(() {
                    showAllData();
                  });
                },
              ),

            ],
          ),
        ),
      ),
      body: ListView.builder(
        itemCount: listToShow.length,
        itemBuilder: (context, i) {
          return Ink(
            color: Colors.blueGrey,
            child: ListTile(
              title: Text(listToShow[i].toString()),
            ),
          );
        },
      ),
    );
  }

  void updateDataInList() {
    listToShow = new List.generate(10, (_) => data[_random.nextInt(data.length)]);
  }

  void showAllData(){
    listToShow = data;
  }

}

输出：

【讨论】：

【解决方案3】：

在将消息传递给列表生成器之前，您可以随机排列消息列表。喜欢使用

messages.toList()..shuffle()

【讨论】：