Flutter - 使用 for 循環或列表創建具有可編輯屬性的自定義小部件

Question

我創建了一個自定義的 class，RectButton，具有 buttonChild、bgColor 和 onPress 的可編輯屬性。 我希望通過創建一個新的小部件來使這個小部件更加動態，該小部件可以基於變量 integer（即一個屏幕上有 4 個按鈕，另一個屏幕上有 3 個按鈕等）創建一行這些 RectButtons，但無法弄清楚如何繼續在新的小部件中具有完全可編輯的屬性（bgColor 不依賴於索引，即 bgColor: Colors.red[100 + 100 * index]）。

class RectButton extends StatelessWidget {
  RectButton({this.buttonChild, this.bgColor, this.onPress});

  final Widget buttonChild;
  final Color bgColor;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Container(
        constraints: BoxConstraints.expand(width: 100, height: 50),
        child: Center(child: buttonChild),
        decoration: BoxDecoration(
            color: bgColor,
            shape: BoxShape.rectangle,
            border: Border.all(width: 1, color: Colors.white)),
        padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
      ),
    );
  }
}

有什么想法嗎？ 任何幫助深表感謝。 我一直在谷歌搜索我能找到的關於循環和列表的所有東西，但沒有成功。 也感謝任何資源——flutter 有點新:)

編輯：更新代碼

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

enum Options { option0, option1, option2, option3 }

class Screen1 extends StatefulWidget {
  @override
  _Screen1State createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  List<Widget> makeButtons(int num, List<Widget> children, List<Color> colors,
      List<Function> onPresses) {
    List<Widget> buttons = new List();
    for (int i = 0; i < num; i++) {
      buttons.add(RectButton(children[i], colors[i], onPresses[i]));
    }
    return buttons;
  }

  Options selectedOption;

  @override
  Widget build(BuildContext context) {
    int num = 2;
    List<Widget> children = [
      Text("A"),
      Text("B"),
    ];
    List<Color> colors = [
      selectedOption == Options.option0 ? Colors.red : Colors.green,
      selectedOption == Options.option1 ? Colors.red : Colors.green
    ];
    List<Function> onPresses = [
      () {
        setState(() {
          selectedOption = Options.option0;
        });
      },
      () {
        setState(() {
          selectedOption = Options.option1;
        });
      },
    ];
// 3rd method does nothing
    return Scaffold(
      appBar: AppBar(
        title: Text('title'),
      ),
      body: Row(
        children: makeButtons(3, children, colors, onPresses),
      ),
    );
  }
}

Answer 1

如果您可以為您想要的每個子項、顏色、onPress 創建列表，則可以使用下面的代碼循環並創建一個RectButton列表：

List<Widget> makeButtons(int num, List<Widget> children, List<Color> colors, List<Function> onPresses){
  List<Widget> buttons = new List();
  for(int i = 0; i < num; i ++){
    buttons.add(RectButton(buttonChild: children[i], bgColor: colors[i], onPress: onPresses[i]));
  }
  return buttons;
}

您可以將它與Row一起使用，例如：

Row(
  children: makeButtons(...),
),

您還可以修改makeButtons方法以添加可選參數，以防您希望一種顏色始終如一/具有 [100+100*i] 差異等。

編輯：構建方法示例：

Widget build(BuildContext context) {
    int num = 2;
    List<Widget> children = [Text("A"), Text("B"), Text(_counter.toString())];
    List<Color> colors = [Colors.red, Colors.blue, Colors.green];
    List<Function> onPresses = [_incrementCounter, _decrementCounter, (){}];
// 3rd method does nothing
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Row(
      children: makeButtons(3, children, colors, onPresses),
      ),
    );
  }