Flutter自定义视图形状插件shape_of_view的使用

Flutter自定义视图形状插件shape_of_view的使用

通过使用shape_of_view插件，您可以为任何Flutter小部件赋予自定义形状。该插件支持Material Design 2，并提供了多种预定义的形状。

下载

在pubspec.yaml文件中添加以下依赖项：

dependencies:
  shape_of_view:

然后运行flutter pub get来安装插件。

使用示例

以下是一些常见的使用示例，展示了如何使用shape_of_view插件创建不同形状的视图。

Circle（圆形）

ShapeOfView(
  shape: CircleShape(
    borderColor: Colors.white, // 可选参数，设置边框颜色
    borderWidth: 2, // 可选参数，设置边框宽度
  ),
  child: Container(
    color: Colors.blue,
    width: 100,
    height: 100,
  ),
)

圆形

RoundRect（圆角矩形）

ShapeOfView(
  shape: RoundRectShape(
     borderRadius: BorderRadius.circular(12), // 设置圆角半径
     borderColor: Colors.white, // 可选参数，设置边框颜色
     borderWidth: 2, // 可选参数，设置边框宽度
  ),
  child: Container(
    color: Colors.green,
    width: 200,
    height: 100,
  ),
)

圆角矩形

ClipCorner（切角矩形）

ShapeOfView(
  shape: CutCornerShape(
     borderRadius: BorderRadius.circular(12), // 设置圆角半径
  ),
  child: Container(
    color: Colors.orange,
    width: 200,
    height: 100,
  ),
)

切角矩形

Arc（弧形）

ShapeOfView(
  shape: ArcShape(
    direction: ArcDirection.Outside, // 弧的方向
    height: 20, // 弧的高度
    position: ArcPosition.Bottom // 弧的位置
  ),
  child: Container(
    color: Colors.purple,
    width: 200,
    height: 100,
  ),
)

弧形

Diagonal（对角线）

ShapeOfView(
  elevation: 4, // 阴影高度
  height: 300, // 视图高度
  shape: DiagonalShape(
    position: DiagonalPosition.Bottom, // 对角线位置
    direction: DiagonalDirection.Right, // 对角线方向
    angle: DiagonalAngle.deg(angle: 10) // 对角线角度
  ),
  child: Container(
    color: Colors.teal,
    width: 300,
    height: 300,
  ),
)

对角线

Triangle（三角形）

ShapeOfView(
  shape: TriangleShape(
    percentBottom: 0.5, // 底部占比例
    percentLeft: 0, // 左侧占比例
    percentRight: 0 // 右侧占比例
  ),
  child: Container(
    color: Colors.red,
    width: 200,
    height: 200,
  ),
)

三角形

Bubble（气泡）

ShapeOfView(
  shape: BubbleShape(
    position: BubblePosition.Bottom, // 气泡位置
    arrowPositionPercent: 0.5, // 箭头位置比例
    borderRadius: 20, // 圆角半径
    arrowHeight: 10, // 箭头高度
    arrowWidth: 10 // 箭头宽度
  ),
  child: Container(
    color: Colors.brown,
    width: 200,
    height: 200,
  ),
)

气泡

Star（星星）

ShapeOfView(
  shape: StarShape(
    noOfPoints: 5 // 星星的角数
  ),
  child: Container(
    color: Colors.pink,
    width: 200,
    height: 200,
  ),
)

五角星

Polygon（多边形）

ShapeOfView(
  shape: PolygonShape(
    numberOfSides: 9 // 多边形的边数
  ),
  child: Container(
    color: Colors.lightBlue,
    width: 200,
    height: 200,
  ),
)

多边形

使用自定义形状

您还可以通过实现CustomShape接口来自定义形状：

ShapeOfView(
  shape: CustomShape(
    builder: (rect) => Path()
      ..moveTo(0, 0)
      ..lineTo(100, 100)
      ..close(),
  ),
  child: Container(
    color: Colors.indigo,
    width: 200,
    height: 200,
  ),
)

或者通过继承Shape类来自定义形状：

class MyShape extends Shape {
  [@override](/user/override)
  Path build({Rect rect, double scale}) {
    return Path()
      ..moveTo(0, 0)
      ..lineTo(100, 100)
      ..close();
  }
}

ShapeOfView(
  shape: MyShape(),
  child: Container(
    color: Colors.deepOrange,
    width: 200,
    height: 200,
  ),
)

更多关于Flutter自定义视图形状插件shape_of_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义视图形状插件shape_of_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


shape_of_view 是一个用于在 Flutter 中自定义视图形状的插件。它允许你轻松地创建各种形状的容器，如圆形、椭圆形、三角形、星形等。以下是如何使用 shape_of_view 插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 shape_of_view 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  shape_of_view: ^2.0.0

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 shape_of_view 包：

import 'package:shape_of_view/shape_of_view.dart';

3. 使用 ShapeOfView

ShapeOfView 是一个可以包裹任何子部件的容器，并且可以自定义其形状。以下是一些常见形状的示例：

圆形 (CircleShape)

ShapeOfView(
  shape: CircleShape(),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Center(
      child: Text('Circle'),
    ),
  ),
)

椭圆形 (OvalShape)

ShapeOfView(
  shape: OvalShape(),
  child: Container(
    width: 150,
    height: 100,
    color: Colors.green,
    child: Center(
      child: Text('Oval'),
    ),
  ),
)

三角形 (TriangleShape)

ShapeOfView(
  shape: TriangleShape(
    percentBottom: 0.5,
    percentLeft: 0.3,
    percentRight: 0.7,
  ),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
    child: Center(
      child: Text('Triangle'),
    ),
  ),
)

星形 (StarShape)

ShapeOfView(
  shape: StarShape(
    numberOfPoints: 5,
  ),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.yellow,
    child: Center(
      child: Text('Star'),
    ),
  ),
)

自定义形状 (CustomShape)

你还可以通过 CustomShape 创建自定义形状：

ShapeOfView(
  shape: CustomShape(
    path: (size) {
      final path = Path();
      path.moveTo(0, size.height);
      path.lineTo(size.width / 2, 0);
      path.lineTo(size.width, size.height);
      path.close();
      return path;
    },
  ),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.purple,
    child: Center(
      child: Text('Custom'),
    ),
  ),
)

4. 其他属性

ShapeOfView 还支持其他一些属性，如 borderColor、borderWidth、elevation 等，可以进一步自定义视图的外观。

ShapeOfView(
  shape: CircleShape(),
  borderColor: Colors.black,
  borderWidth: 2.0,
  elevation: 5.0,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Center(
      child: Text('Circle'),
    ),
  ),
)

5. 完整示例

以下是一个完整的示例，展示了如何使用 ShapeOfView 创建不同形状的视图：

import 'package:flutter/material.dart';
import 'package:shape_of_view/shape_of_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ShapeOfView Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ShapeOfView(
                shape: CircleShape(),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                  child: Center(
                    child: Text('Circle'),
                  ),
                ),
              ),
              SizedBox(height: 20),
              ShapeOfView(
                shape: OvalShape(),
                child: Container(
                  width: 150,
                  height: 100,
                  color: Colors.green,
                  child: Center(
                    child: Text('Oval'),
                  ),
                ),
              ),
              SizedBox(height: 20),
              ShapeOfView(
                shape: TriangleShape(
                  percentBottom: 0.5,
                  percentLeft: 0.3,
                  percentRight: 0.7,
                ),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                  child: Center(
                    child: Text('Triangle'),
                  ),
                ),
              ),
              SizedBox(height: 20),
              ShapeOfView(
                shape: StarShape(
                  numberOfPoints: 5,
                ),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.yellow,
                  child: Center(
                    child: Text('Star'),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部