如何在flutter中计算按钮？

Question

我想自动计算按钮。图中有这些图标按钮，它们的数字显示为“###”。我不知道如何自动编号这些按钮（1、2、3 等），而不必手动执行每个按钮。这是我的代码：

Widget _lockerRow(){
    return const Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RotatedBox(
          quarterTurns: 1,
          child: Text('###',
            style: TextStyle(fontSize: 25),)),
        RotatedBox(
          quarterTurns: 1,
          child: IconButton(
            onPressed: null,
            iconSize: 100, 
            icon: Icon(Icons.sensor_door)
            ),
        ),
        RotatedBox(
          quarterTurns: 3,
          child: IconButton(
            onPressed: null,
            iconSize: 100, 
            icon: Icon(Icons.sensor_door)
            ),
        ),
        RotatedBox(
          quarterTurns: 3,
          child: Text('###',
            style: TextStyle(fontSize: 25),)),
        SizedBox(
          width: 100,
        ),
        RotatedBox(
          quarterTurns: 1,
          child: Text('###',
            style: TextStyle(fontSize: 25),)),
        RotatedBox(
          quarterTurns: 1,
          child: IconButton(
            onPressed: null,
            iconSize: 100,
            icon: Icon(Icons.sensor_door)
            ),
        ),
        RotatedBox(
          quarterTurns: 3,
          child: IconButton(
            onPressed: null,
            iconSize: 100, 
            icon: Icon(Icons.sensor_door)
            ),
        ),
        RotatedBox(
          quarterTurns: 3,
          child: Text('###',
            style: TextStyle(fontSize: 25),)),
      ],
    );
  }

这是它在应用程序中的显示方式：

Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        return _onWillPopScope();
      },
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Menú Principal'),
            backgroundColor: Colors.orange,
          ),
          body: SingleChildScrollView(
            child: Center(
              child: Column(
                children: [
                  const Text('Módulo Control Lockers',
                    style: TextStyle(fontSize: 20),
                    ),
                  _lockerRow(),
                ],
              ),
            ),
          )

请帮我解决这个问题。

Answer 1

IIUC，只需使用

List.generate

即可为您提供

index

。

例如：

List.generate(10, (index) {
      return Container(
        child: Text('Hello World $index'),
      );
    });

或者，如果您想要循环：

List<Widget> _buildEnumeratedLayout() {
    List<Widget> widgets = [];
    for (int i = 0; i < 10; i++) {
      widgets.add(Text("Hellow World $i"));
    }
    return widgets;
  }

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Column(
          children: _buildEnumeratedLayout(),
        ),
      ),
    );
  }

  List<Widget> _buildEnumeratedLayout() {
    return List.generate(10, (index) {
      return Container(
        child: Text('Hello World $index'),
      );
    });
  }
}