如何更改ElevatedButton的禁用颜色

斯科特

我正在使用Flutter ElevatedButton,建议在文档中的RaisedButton上使用。

在凸起按钮中,您可以指定和disableColor。在ElevatedButton中,我不能。

如何禁用ElevatedButton的外观?

chunhunghan

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

    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),
      ),
    );
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何更改禁用的<TextInput />颜色

来自分类Dev

如何更改禁用的 jbutton 的颜色?

来自分类Dev

如何在Flutter中启用/禁用ElevatedButton

来自分类Dev

如何更改Bootstrap已禁用按钮的颜色?

来自分类Dev

如何更改,禁用按钮颜色的FMX?

来自分类Dev

更改禁用控件的颜色

来自分类Dev

如何在Highcharts中禁用悬停颜色更改?

来自分类Dev

如何更改ASP.NET中禁用的TextFiled的背景颜色?

来自分类Dev

如何更改主题中的材质按钮禁用状态背景颜色?

来自分类Dev

Material-UI | 如何更改禁用的文本框的颜色?

来自分类Dev

禁用时如何更改TextField下划线边框颜色

来自分类Dev

如何禁用“一个链接”上的链接颜色更改?

来自分类Dev

当CSS悬停时,如何使禁用的按钮不更改颜色?

来自分类Dev

如何在UISegmentedControl中更改禁用段的颜色

来自分类Dev

更改禁用的QCalendarWidget周末颜色

来自分类Dev

更改禁用的QCalendarWidget周末颜色

来自分类Dev

在Android中,如何在不禁用onClick颜色的情况下更改listView的背景颜色?

来自分类Dev

如何禁用vim语法颜色?

来自分类Dev

如何禁用vim语法颜色?

来自分类Dev

使用属性“已禁用”更改“选项”颜色

来自分类Dev

WPF ListView属性禁用线条并更改颜色

来自分类Dev

当禁用为 true 时更改背景颜色

来自分类Dev

禁用时更改 winform datetimepicker 的字体颜色

来自分类Dev

如果禁用了内部的EditText,如何更改TextInputLayout的浮动提示颜色

来自分类Dev

在odoo中单击一次后,如何更改按钮的颜色并将其禁用?

来自分类Dev

如何在子小部件中禁用底部的SafeArea或更改其颜色?

来自分类Dev

如何更改箭头的颜色

来自分类Dev

如何更改ProgressBar颜色?

来自分类Dev

如何更改TabWidget颜色?

Related 相关文章

  1. 1

    如何更改禁用的<TextInput />颜色

  2. 2

    如何更改禁用的 jbutton 的颜色?

  3. 3

    如何在Flutter中启用/禁用ElevatedButton

  4. 4

    如何更改Bootstrap已禁用按钮的颜色?

  5. 5

    如何更改,禁用按钮颜色的FMX?

  6. 6

    更改禁用控件的颜色

  7. 7

    如何在Highcharts中禁用悬停颜色更改?

  8. 8

    如何更改ASP.NET中禁用的TextFiled的背景颜色?

  9. 9

    如何更改主题中的材质按钮禁用状态背景颜色?

  10. 10

    Material-UI | 如何更改禁用的文本框的颜色?

  11. 11

    禁用时如何更改TextField下划线边框颜色

  12. 12

    如何禁用“一个链接”上的链接颜色更改?

  13. 13

    当CSS悬停时,如何使禁用的按钮不更改颜色?

  14. 14

    如何在UISegmentedControl中更改禁用段的颜色

  15. 15

    更改禁用的QCalendarWidget周末颜色

  16. 16

    更改禁用的QCalendarWidget周末颜色

  17. 17

    在Android中,如何在不禁用onClick颜色的情况下更改listView的背景颜色?

  18. 18

    如何禁用vim语法颜色?

  19. 19

    如何禁用vim语法颜色?

  20. 20

    使用属性“已禁用”更改“选项”颜色

  21. 21

    WPF ListView属性禁用线条并更改颜色

  22. 22

    当禁用为 true 时更改背景颜色

  23. 23

    禁用时更改 winform datetimepicker 的字体颜色

  24. 24

    如果禁用了内部的EditText,如何更改TextInputLayout的浮动提示颜色

  25. 25

    在odoo中单击一次后,如何更改按钮的颜色并将其禁用?

  26. 26

    如何在子小部件中禁用底部的SafeArea或更改其颜色?

  27. 27

    如何更改箭头的颜色

  28. 28

    如何更改ProgressBar颜色?

  29. 29

    如何更改TabWidget颜色?

热门标签

归档