如何从列表中传递变量答案

【问题标题】：How to pass variables from a list如何从列表中传递变量
【发布时间】：2022-07-13 23:12:48
【问题描述】：

我创建了一个类，其中包含一个带有特定参数的按钮。将来我想制作一个包含随机参数的按钮数组

class _ButtonWidget extends StatelessWidget {
   _ButtonWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return    Center(
      child: SizedBox(
              width: 200,
              height: 200,
              child: ElevatedButton
              (onPressed: (() {
                
              }),
               child: Text('PRESS', 
               style: TextStyle(color: Colors.white),),
                style: ButtonStyle( 
                backgroundColor: MaterialStateProperty.all(Colors.black), 
                overlayColor: MaterialStateProperty.all(Colors.green),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>( RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(300.0),
                side: BorderSide(color: Colors.blue, width: 3),
                ),
             ),                
                ),
                ),
            ),
    );
  }
}

我还有一个列表，以后想在里面随机设置颜色、半径等参数。

class StyleButton {

  final backgroundColor;
  final overlayColor;
  final int borderRadius;
  final borderSideColor;

  StyleButton({

  required this.backgroundColor, required this.overlayColor, required this.borderRadius, required this.borderSideColor,
    });
}


class StyleButtonWidget extends StatefulWidget {

   StyleButtonWidget({Key? key}) : super(key: key);

  @override
  State<StyleButtonWidget> createState() => _StyleButtonWidgetState();
}

class _StyleButtonWidgetState extends State<StyleButtonWidget> {
  final _movies = [
    StyleButton(
      backgroundColor: Colors.black, 
      overlayColor: Colors.green, 
      borderRadius: 300, 
      borderSideColor: Colors.blue,
      ),
      
  ];
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

如何从列表中传递变量

  final _movies = [
    StyleButton(
      backgroundColor: Colors.black, 
      overlayColor: Colors.green, 
      borderRadius: 300, 
      borderSideColor: Colors.blue,
      ),

在按钮参数中？

style: ButtonStyle( 
                backgroundColor: MaterialStateProperty.all(Colors.black), 
                overlayColor: MaterialStateProperty.all(Colors.green),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>( RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(300.0),
                side: BorderSide(color: Colors.blue, width: 3),
                ),

【问题讨论】：

抱歉，您能解释一下您遇到的问题吗？

标签： flutter list dart parameters

【解决方案1】：

像这样试试。

更改您的 ButtonWidget 以接受 StyleButtonParam。

class ButtonWidget extends StatelessWidget {
  const ButtonWidget({Key? key, required this.buttonStyle}) : super(key: key);
  final StyleButton buttonStyle;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 200,
        height: 200,
        child: ElevatedButton(
          onPressed: (() {}),
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(buttonStyle.backgroundColor),
            overlayColor: MaterialStateProperty.all(buttonStyle.overlayColor),
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(buttonStyle.borderRadius.toDouble()),
                side: BorderSide(color: buttonStyle.borderSideColor, width: 3),
              ),
            ),
          ),
          child: const Text(
            'PRESS',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

像这样访问 Button 小部件。

class StyleButtonWidget extends StatefulWidget {
  const StyleButtonWidget({Key? key}) : super(key: key);

  @override
  State<StyleButtonWidget> createState() => _StyleButtonWidgetState();
}

class _StyleButtonWidgetState extends State<StyleButtonWidget> {
  List<Widget> buttons = [];
  final List<StyleButton> _movies = [
    StyleButton(
      backgroundColor: Colors.black,
      overlayColor: Colors.green,
      borderRadius: 300,
      borderSideColor: Colors.blue,
    ),
  ];
  
  buildButton() {
    _movies.forEach((element) { 
      buttons.add(ButtonWidget(buttonStyle: element));
    });
    setState((){});
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

注意：按钮的附加更改方法可以通过手势检测器和功能参数包装。并在访问小部件时添加它。

【讨论】：

【解决方案2】：

  final _movies = [
    StyleButton(
      backgroundColor: Colors.black, 
      overlayColor: Colors.green, 
      borderRadius: 300, 
      borderSideColor: Colors.blue,
      ),

从以下列表中，您可以访问任何具有索引的变量 _movies[0].backgroundColor

如果你想让它动态化，请使用for-loop

for(var i = 0; i < _movies > length; i++)
   _movies[i].backgroundColor;

【讨论】：