矩形浮动动作按钮(圆角) - Dart

简介

本文介绍了如何在Dart中使用Flutter框架创建矩形浮动动作按钮（圆角）。矩形浮动动作按钮是一种在屏幕上浮动的按钮，可以方便地用来执行某些操作。此外，这个按钮的四个角是圆角，使得外观更加美观。

实现步骤

1. 首先创建一个新的Flutter项目，可以使用命令行或者Android Studio来创建。

2. 打开 main.dart 文件，定义一个新的 StatefulWidget，并在 build 方法中返回一个 Scaffold，其中包括一个 FloatingActionButton。

   class MyHomePage extends StatefulWidget {
     MyHomePage({Key key, this.title}) : super(key: key);
     final String title;
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Container(),
         floatingActionButton: FloatingActionButton(
           onPressed: () {},
           child: Icon(Icons.add),
         ),
       );
     }
   }
   

3. 接下来，我们想要把这个按钮变成矩形的，并且四个角是圆角。为了实现这个效果，我们可以使用 ClipRRect 和 Material 控件。将 floatingActionButton 改成下面的代码就可以了：

   floatingActionButton: ClipRRect(
     borderRadius: BorderRadius.circular(10.0),
     child: Material(
       elevation: 5.0,
       color: Colors.blue,
       child: InkWell(
         onTap: () {},
         child: SizedBox(
           width: 56.0,
           height: 56.0,
           child: Icon(Icons.add),
         ),
       ),
     ),
   ),
   

   这里使用 ClipRRect 控件来设置四个角是圆角。使用 Material 控件可以设置按钮的颜色和阴影效果。 InkWell 控件是用来处理按钮的点击事件。

4. 最后，我们还可以为按钮添加一些动画效果，使其更加生动。这里我们使用 AnimatedContainer 控件来实现一个简单的动画效果。将 floatingActionButton 改为以下代码即可：

   floatingActionButton: AnimatedContainer(
     duration: Duration(milliseconds: 300),
     width: _width,
     height: 56.0,
     child: ClipRRect(
       borderRadius: BorderRadius.circular(10.0),
       child: Material(
         elevation: 5.0,
         color: Colors.blue,
         child: InkWell(
           onTap: _onTap,
           child: SizedBox(
             width: 56.0,
             height: 56.0,
             child: Icon(Icons.add),
           ),
         ),
       ),
     ),
   ),
   

   在这里，我们使用了一个 _width 变量来控制动画效果。当按钮被点击时，我们可以将 _width 的宽度从 56 变为 200，让按钮变成一个矩形。点击按钮时，我们可以调用 _onTap 方法来完成动画效果的设置。具体代码如下：

   double _width = 56.0;
   
   void _onTap() {
     setState(() {
       _width = _width == 56.0 ? 200.0 : 56.0;
     });
   }
   

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '矩形浮动动作按钮(圆角)',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '矩形浮动动作按钮(圆角)'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  double _width = 56.0;

  void _onTap() {
    setState(() {
      _width = _width == 56.0 ? 200.0 : 56.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(),
      floatingActionButton: AnimatedContainer(
        duration: Duration(milliseconds: 300),
        width: _width,
        height: 56.0,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(10.0),
          child: Material(
            elevation: 5.0,
            color: Colors.blue,
            child: InkWell(
              onTap: _onTap,
              child: SizedBox(
                width: 56.0,
                height: 56.0,
                child: Icon(Icons.add),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

总结

本文介绍了如何在Dart中使用Flutter框架创建矩形浮动动作按钮（圆角）。通过使用 ClipRRect 和 Material 控件，我们可以实现一个美观的按钮；通过使用 AnimatedContainer 控件，我们还可以为按钮添加一些动画效果，使得按钮更加生动。