如何更改 ElevatedButton 的禁用颜色

Question

我正在使用 Flutter ElevatedButton，在文档中建议使用它而不是 RaisedButton。

在凸起的按钮中，您可以指定和 disabledColor。在 ElevatedButton 中，我不能。

如何设置禁用时 ElevatedButton 的外观？

Answer 1

在 ElevatedButton.styleFrom 中使用 onSurface

 ElevatedButton(
          style: ElevatedButton.styleFrom(
                   primary: Colors.white,
                   onSurface: Colors.green,
          ),
          child: Text("next"),
          onPressed:null
 )

Answer 2

一个简单的解决方案是使用onSurface 属性：

ElevatedButton(
  onPressed: null,
  style: ElevatedButton.styleFrom(
    onSurface: Colors.brown,
  ),
  child: Text('Button'),
)

Answer 3

我使用新的 TextButton 和 ElevatedButton 小部件创建了一些代码来处理 FlatButton 和 RaisedButton 的 disabledText 和 disabledColor。

这个要点在这里（我无法让 dartpad 识别要点......但你可以直接复制并粘贴到那里，它可以工作......它只是不会链接） https://gist.github.com/wterrill/7942b4bf5d74a8b2ace952ebf213fe5d

如果你想从这里复制和粘贴，这里是代码本身：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bool disableButton = true; // <-- Change this to see buttons disabled
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlatButton(
                  child: Text("FlatButton"),
                  onPressed: disableButton
                      ? null
                      : () {
                          print("FlatButton normal");
                        },
                  color: Colors.green,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                  disabledColor: Colors.grey,
                  disabledTextColor: Colors.pink),
              SizedBox(height: 25),
              FlatButtonX(
                  childx: Text("TextButton"),
                  onPressedx: disableButton
                      ? null
                      : () {
                          print("FlatButtonX (TextButton)");
                        },
                  colorx: Colors.green,
                  textColorx: Colors.black,
                  shapex: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                  disabledColorx: Colors.grey,
                  disabledTextColorx: Colors.pink),
              SizedBox(height: 100),
              RaisedButton(
                child: Text('RaisedButton'),
                color: Colors.green,
                textColor: Colors.black,
                onPressed: disableButton
                      ? null
                      : () {
                          print("RaisedButton normal");
                        },
                shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                disabledColor: Colors.grey,
                  disabledTextColor: Colors.pink,
              ),
              SizedBox(height: 25),
              RaisedButtonX(
                childx: Text('ElevatedButton'),
                colorx: Colors.green,
                textColorx: Colors.black,
                onPressedx:disableButton
                      ? null
                      : () {
                          print("RaisedButtonX (ElevatedButton)");
                        },
                shapex: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                                  disabledColorx: Colors.grey,
                  disabledTextColorx: Colors.pink,
              )
            ],
          ),
        ),
      ),
    );
  }
}

Widget FlatButtonX(
    {Color colorx,
    @required Widget childx,
    RoundedRectangleBorder shapex,
    @required Function onPressedx,
    Key keyx,
    Color disabledColorx,
    Color disabledTextColorx,
    Color textColorx}) {
  if (disabledTextColorx == null && textColorx == null) {
    disabledTextColorx = colorx;
  }
  if (textColorx == null) {
    textColorx = colorx;
  }
  return TextButton(
      key: keyx,
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
          // text color
          (Set<MaterialState> states) => states.contains(MaterialState.disabled)
              ? disabledTextColorx
              : textColorx,
        ),
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          // background color    this is color:
          (Set<MaterialState> states) =>
              states.contains(MaterialState.disabled) ? disabledColorx : colorx,
        ),
        shape: MaterialStateProperty.all(shapex),
      ),
      onPressed: onPressedx as void Function(),
      child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0), child: childx));
}

Widget RaisedButtonX(
    {Color colorx,
    @required Widget childx,
    RoundedRectangleBorder shapex,
    @required Function onPressedx,
    Key keyx,
    Color disabledColorx,
    Color disabledTextColorx,
    Color textColorx}) {
  if (disabledTextColorx == null && textColorx == null) {
    disabledTextColorx = colorx;
  }
  if (textColorx == null) {
    textColorx = colorx;
  }
  return ElevatedButton(
      key: keyx,
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
          // text color
          (Set<MaterialState> states) => states.contains(MaterialState.disabled)
              ? disabledTextColorx
              : textColorx,
        ),
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          // background color    this is color:
          (Set<MaterialState> states) =>
              states.contains(MaterialState.disabled) ? disabledColorx : colorx,
        ),
        shape: MaterialStateProperty.all(shapex),
      ),
      onPressed: onPressedx as void Function(),
      child: childx);
}

Answer 4

您可以在下面复制粘贴运行完整代码
您可以使用ButtonStyle 并检查states.contains(MaterialState.disabled) 返回您需要的颜色
在演示代码中，禁用颜色为绿色
代码sn-p

    ElevatedButton(
      onPressed: null,
      child: Text('Submit disable'),
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.pressed))
              return Theme.of(context)
                  .colorScheme
                  .primary
                  .withOpacity(0.5);
            else if (states.contains(MaterialState.disabled))
              return Colors.green;
            return null; // Use the component's default.
          },
        ),
      ),
    ),

工作演示

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: null,
              child: Text('Submit disable'),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) {
                    if (states.contains(MaterialState.pressed))
                      return Theme.of(context)
                          .colorScheme
                          .primary
                          .withOpacity(0.5);
                    else if (states.contains(MaterialState.disabled))
                      return Colors.green;
                    return null; // Use the component's default.
                  },
                ),
              ),
            ),
            ElevatedButton(
              onPressed: () {
                print("clicked");
              },
              child: Text('Submit enable'),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) {
                    if (states.contains(MaterialState.pressed))
                      return Theme.of(context)
                          .colorScheme
                          .primary
                          .withOpacity(0.5);
                    else if (states.contains(MaterialState.disabled))
                      return Colors.green;
                    return null; // Use the component's default./ Use the component's default.
                  },
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Answer 5

使用按钮的style 属性。它包含backgroundColor 的MaterialStateProperty<Color>。有一个常数MaterialState.disabled。我认为这就是你所需要的。 https://api.flutter.dev/flutter/material/MaterialStateProperty-class.html