如何让 Flutter 按钮使用主题颜色

Question

我创建了一个 Widget，它基本上是一个 ElevatedButton，除了它的宽度可以与屏幕尺寸成比例（可以使用 WidthFactor 设置）。

import 'package:flutter/material.dart';

class FractionalButton extends StatelessWidget {

  final double widthFactor;
  final Widget child;
  final Function onPressed;

  FractionalButton({
    required this.widthFactor,
    required this.onPressed,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: widthFactor,
      child: ElevatedButton(
        onPressed: onPressed(),
        child: child,
      ),
    );
  }
}

问题是，它显示灰色而不是使用绿色的基本主题颜色。

ElevatedButton(
     onPressed: () {},
     child: const Text("Country"),
),
FractionalButton(
    widthFactor: 1,
    onPressed: () {},
    child: const Text("Password"),
),

如何让我的 Widget 使用当前的主题颜色？

Answer 1

这不是 ElevatedButton 的问题，而是您传递给自定义 ElevatedButton 的 onPressed 函数的问题。

而不是

final Function onPressed;

使用

final VoidCallback onPressed;

或

final Function() onPressed;

并像下面这样使用它：

onPressed: onPressed,

您的 FractionalButton 将如下所示。

class FractionalButton extends StatelessWidget {
  final double widthFactor;
  final Widget child;
  final VoidCallback onPressed;

  FractionalButton({
    required this.widthFactor,
    required this.onPressed,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: widthFactor,
      child: ElevatedButton(
        onPressed: onPressed,
        child: child,
      ),
    );
  }
}

编辑发生这种情况的原因是您没有将 onPressed 正确传递给自定义 ElevatedButton 并且它被设置为禁用模式。

Answer 2

问题出在函数的声明上试试这个：

final void  Function() onPressed;

整个代码：

  class FractionalButton extends StatelessWidget {

    final double widthFactor;
    final Widget child;
    final void  Function() onPressed;

    FractionalButton({
      required this.widthFactor,
      required this.onPressed,
      required this.child,
    });

    @override
    Widget build(BuildContext context) {
      return FractionallySizedBox(
        widthFactor: widthFactor,
        child: ElevatedButton(
          onPressed: onPressed,
          child: child,
        ),
      );
    }
  }

所以当你使用这个小部件时:

ElevatedButton(
            onPressed: () {},
            child: const Text("Country"),
          ),
          FractionalButton(
            widthFactor: 0.5,
            onPressed: () {  },
            child: const Text("Password"),
          ),

这将是结果：

如您所见，它使用与原始 ElevatedButton 相同的主题。

如何让 Flutter 按钮使用主题颜色

How to make a Flutter button use themed colors

themes

widget

button

flutter