颤振扁平按钮大小 - Dart

在Dart编程语言中，我们可以使用Flutter框架创建具有漂亮UI外观的移动应用程序。这就涉及到按钮的创建，而颤振扁平按钮就是其中一种类型。本文将向您介绍如何创建颤振扁平按钮，并设置其大小。

创建颤振扁平按钮

首先，我们需要在Flutter中创建一个按钮。我们将使用RaisedButton控件，并设置其颜色。以下是创建按钮的示例代码：

RaisedButton(
    onPressed: () {},
    color: Colors.blue,
    textColor: Colors.white,
    child: Text('颤振扁平按钮'),
),

现在，我们将为按钮添加一个动画以使其颤动。要添加动画，我们需要使用Flutter的动画库。以下是颤振动画函数的代码：

AnimationController _controller;
Animation<double> _animation;

@override
void initState() {
    super.initState();
    _controller = AnimationController(
        vsync: this,
        duration: Duration(milliseconds: 500),
    )..addListener(() {
        setState(() {});
    });
    _animation = Tween<double>(
        begin: 0.0,
        end: 1.0,
    ).animate(_controller);
}

@override
void dispose() {
    _controller.dispose();
    super.dispose();
}

void _startAnimation() {
    _controller.forward().then((_) {
        _controller.reverse();
    });
}

在这个动画函数中，我们创建了一个AnimationController对象和一个Animation对象。我们将控制器添加到侦听器中，并设置动画的起始值和结束值。当控制器向前运行时，按钮将移动到顶部，然后再移回来，使其看起来颤动。

现在我们已经创建了一个颤振动画函数，我们需要为按钮添加Tap Gesture（轻击手势），以启动动画函数。以下是为按钮添加手势检测的代码：

GestureDetector(
    onTap: () {
        _startAnimation();
    },
    child: Container(
        padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
        decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(20.0),
            boxShadow: [
                BoxShadow(
                    color: Colors.black26,
                    offset: Offset(0, 2),
                    blurRadius: 2.0,
                ),
            ],
            gradient: LinearGradient(
                colors: [Colors.blue, Colors.green],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
            ),
        ),
        child: Text(
            '颤振扁平按钮',
            style: TextStyle(
                fontSize: 20.0,
                color: Colors.white,
            ),
        ),
    ),
),

在这个代码段中，我们将RaisedButton控件替换为一个GestureDetector控件，并将颤振动画函数添加到onTap回调中。我们还定义了一个Container控件，将需要的装饰品添加到按钮上，以更好地呈现它。

设置按钮大小

要设置按钮的大小，我们可以使用Container控件。以下是一个示例代码，该代码将扁平按钮的高度设置为50像素：

GestureDetector(
    onTap: () {},
    child: Container(
        height: 50.0,
        padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
        decoration: BoxDecoration(
            // ...省略其它样式设置...
        ),
        child: Text(
            '颤振扁平按钮',
            style: TextStyle(
                fontSize: 20.0,
                color: Colors.white,
            ),
        ),
    ),
),

在上面的代码中，我们仅将容器的高度设置为50像素。同样，您可以根据需要修改其它属性，例如width、margin等等。

结论

颤振扁平按钮的创建是在Flutter中创建按钮的其中一种方式。按钮的大小可以使用Container控件轻松设置。在一个应用程序的UI设计中，按钮是一个重要的UI控件，需要花费时间仔细设计和修改。谢谢您的阅读！