Flutter如何将列表中的样式变量传递给ElevatedButton参数

• 首先给可复用按钮组件增加StyleButton类型的入参，把原来硬编码的样式值全部替换成入参对象的对应属性。
• 遍历存储样式配置的_movies列表，为每一个配置项生成对应的按钮组件，传入配置即可。
• 建议先给StyleButton类的属性补全明确类型，避免运行时类型错误。

1. 优化StyleButton类定义 #

给颜色属性指定Color类型，代码如下：

import 'package:flutter/material.dart';

class StyleButton {
  final Color backgroundColor;
  final Color overlayColor;
  final int borderRadius;
  final Color borderSideColor;

  StyleButton({
    required this.backgroundColor,
    required this.overlayColor,
    required this.borderRadius,
    required this.borderSideColor,
  });
}

2. 改造按钮组件接收样式参数 #

修改原来的_ButtonWidget构造方法，增加必填的样式入参，替换硬编码的样式值：

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 200,
        height: 200,
        child: ElevatedButton(
          onPressed: () {},
          child: const Text(
            'PRESS',
            style: TextStyle(color: Colors.white),
          ),
          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),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

3. 遍历列表渲染按钮 #

补全_StyleButtonWidgetState的build逻辑，遍历_movies列表生成按钮，后续要加随机样式的按钮，只需要往_movies里添加新的StyleButton实例即可：

class _StyleButtonWidgetState extends State<StyleButtonWidget> {
  final List<StyleButton> _movies = [
    StyleButton(
      backgroundColor: Colors.black,
      overlayColor: Colors.green,
      borderRadius: 300,
      borderSideColor: Colors.blue,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    // 这里用Column纵向排列按钮，需要横向/网格布局替换为Wrap/GridView等组件即可
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: _movies
            .map((styleConfig) => _ButtonWidget(buttonStyle: styleConfig))
            .toList(),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Verc