Question

这很简单，但是我无法像我想要的那样工作。我想有一个自定义的png并使其像RaisedButton一样工作，在这里我可以编辑splashColor，highlightColor，添加边框（其宽度和颜色）并具有Ink的波纹效果，但仅在可见部分上png。现在尝试一下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Buttons practice"),
      ),
      body: new Container(
        color: Colors.amber,
        child: new Column(
            children: <Widget>[
        //Button1
        new Row(
        children: <Widget>[
            Container(
            height: 150,
            width: 150,
            child: new RaisedButton(
              onPressed: () {},
              child: new Image.asset(
                "assets/Freccia.png",
              ),
            ))
        ],
      ),

      //Button2
      new Row(
        children: <Widget>[
          Container(
            height:150 ,
            width: 150,
            child: new FlatButton(onPressed: () {}, child: new Image.asset(
              "assets/Freccia.png",)),
          )],
          ),

          //Button3
          new Row(
            children: <Widget>[
              Container(
                height: 150,
                width: 150,
                child: new OutlineButton(
                    onPressed: () {},
                    child: new Image.asset(
                        "assets/Freccia.png")
                ),
              )
            ],
          ),
        ],
      ),
    ),);
  }
}

Answer 1

到目前为止，我一直在想实现您想做的事情是这样的：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Flutter Sample - Irregular shaped RaisedButton"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {},
          shape: _CustomBorder(),
          color: Colors.blue,
        ),
      ),
    );
  }
}

class _CustomBorder extends ShapeBorder {
  const _CustomBorder();

  @override
  EdgeInsetsGeometry get dimensions {
    return const EdgeInsets.only();
  }

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    return getOuterPath(rect, textDirection: textDirection);
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    return Path()
      ..moveTo(rect.left + rect.width / 2.0, rect.top)
      ..lineTo(rect.right - rect.width / 3, rect.top + rect.height / 3)
      ..lineTo(rect.right, rect.top + rect.height / 2.0)
      ..lineTo(rect.right - rect.width / 3, rect.top + 2 * rect.height / 3)
      ..lineTo(rect.left + rect.width / 2.0, rect.bottom)
      ..lineTo(rect.left + rect.width / 3, rect.top + 2 * rect.height / 3)
      ..lineTo(rect.left, rect.top + rect.height / 2.0)
      ..lineTo(rect.left + rect.width / 3, rect.top + rect.height / 3)
      ..close();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}

  // This border doesn't support scaling.
  @override
  ShapeBorder scale(double t) {
    return null;
  }
}

RaisedButton接受shape属性。我建立了一个自定义ShapeBorder，并将此对象分配给RaisedButton的shape属性。

我创建了一个扩展了_CustomBorder的新类ShapeBorder。在此类中，我重写了ShapeBorder的某些方法。

需要重点关注的方法是getOuterPath()。在此方法中，我返回一个Path对象。如果您观察到，我已经使用过moveTo（），lineTo（）和close（）方法来构建自定义形状。您选中Paths in Flutter: A Visual Guide可以对此进行更多的挖掘。

如果您决定要绘制的形状，则只需替换代码的这一部分即可：

body: Center(
        child: RaisedButton(
          onPressed: () {},
          shape: _CustomBorder(),
          color: Colors.blue,
        ),
      ),

如果您将在上面运行我的代码，那么您将会得到：

另外，当您阅读博客ClipPath, Custom Painter, and Flutter CustomClipper made it fast!时，提到存在一些将.svg文件转换为Path的工具。

具有透明性png的Flutter按钮

1 个答案: