Question

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("..."),
      ),
      body: Container(
        color: Colors.green,
        child: OutlineButton(
          onPressed: () { },
          color: Colors.orange,
          highlightColor: Colors.pink,
          child: Container(
            color: Colors.yellow,
            child: Text("A"),
          ),
          shape: CircleBorder(),
        ),
      ),
    );
  }
}

上面的代码提供了一个透明的按钮。如何获得橙色的OutlineButton？

Answer 1

OutlineButton已被弃用，并已替换为OutlinedButton。（注意“ d”。）

OutlinedButton的{{3}}帮助我了解如何使用它。这是这些状态的示例：禁用（灰色）->正常（蓝色）->按下（红色）

documentation

   return Container(
      width: double.infinity,
      height: 48,
      child: OutlinedButton(
        child: Text(
          "This is an Outline\"d\"Button. (Not OutlineButton)",
          style: TextStyle(color: Colors.white),
        ),
        onPressed: () => print("Tapped"),
        //onPressed: null, //Uncomment this statement to check disabled state.
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.resolveWith<Color>((states) {
            if (states.contains(MaterialState.disabled)) {
              return Colors.grey[100];
            }
            return Colors.blue;
          }),
          overlayColor: MaterialStateProperty.resolveWith<Color>((states) {
            if (states.contains(MaterialState.pressed)) {
              return Colors.red;
            }
            return Colors.transparent;
          }),
          side: MaterialStateProperty.resolveWith((states) {
            Color _borderColor;

            if (states.contains(MaterialState.disabled)) {
              _borderColor = Colors.greenAccent;
            } else if (states.contains(MaterialState.pressed)) {
              _borderColor = Colors.yellow;
            } else {
              _borderColor = Colors.pinkAccent;
            }

            return BorderSide(color: _borderColor, width: 5);
          }),
          shape: MaterialStateProperty.resolveWith<OutlinedBorder>((_) {
            return RoundedRectangleBorder(borderRadius: BorderRadius.circular(16));
          }),
        ),
      ),
    );

Flutter用新的按钮类型（FlatButton，RaisedButton和{{1}替换了以前的3种按钮类型（OutlineButton，TextButton和ElevatedButton） }）与Material Design保持同步，并且还因为使用OutlinedButton提供了最终的灵活性，可以实现所需的特定于状态的UI。您可以详细了解。

Answer 2

要修改OutlineButton的backgroundColor，可以使用DecoratedBox和Theme小部件。在此答案的结尾，您将找到一个简单的示例。

无论如何，我仍然会推荐，而只需使用FlatButton及其color属性。

将OutlinedButton包裹在DecoratedBox内。将shape中的DecoratedBox设置为与OutlinedButton相同的形状。现在，您可以使用color的{{1}}属性来更改颜色。结果在DecoratedBox周围仍将有少量填充。要删除此内容，您可以将OutlinedButton包裹在DecoratedBox内，并在其中调整Theme。在ButtonTheme内，您要设置ButtonTheme。

在Flutter内部添加了填充，以将按钮周围的点击区域增加到最小尺寸48x48 (source)。将materialTapTargetSize: MaterialTapTargetSize.shrinkWrap设置为materialTapTargetSize会删除此最小尺寸。

MaterialTapTargetSize.shrinkWrap示例：

FlatButton

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: FlatButton( color: Colors.pinkAccent, shape: CircleBorder(), onPressed: () => {}, child: Text('A'), ), ), ), ); } }示例：

OutlinedButton

Answer 3

如果您需要更改轮廓边框的颜色

 OutlineButton(
borderSide: BorderSide(color: kPrimaryColor, width: 1),)

Answer 4

您可以通过这种方式检查按钮的背景色。删除hightlightColor，然后尝试为OutlineButton的highlightElevation属性提供一些值，然后按一下，可以看到它最初加载了橙色。

Answer 5

很简单，只要使用

backgroundColor: MaterialStateProperty.all(Colors.colorname),

Answer 6

您可以使用FlatButton，并在那里设置颜色。

如何设置Flutter OutlineButton的背景颜色？

6 个答案: