Flutter的ClipRect 小部件

📌 相关文章

📜 Flutter的ClipRect 小部件

📅 最后修改于: 2021-09-02 05:20:01 🧑 作者: Mango

ClipRect小部件用于使用矩形剪辑其子项。它与快船家族有关。剪刀的主要用途是根据需要剪掉小部件的任何部分。它的行为类似于ClipRRect 并用于剪辑子小部件的矩形部分但没有圆角

构造函数：

Syntax:
ClipRect(
{Key key, 
CustomClipper clipper, 
Clip clipBehavior: Clip.hardEdge, 
Widget child})

特性：

孩子：树中此小部件下方的小部件。
hashCode：此对象的哈希码。
key：控制一个小部件如何替换树中的另一个小部件。
runtimeType：对象的运行时类型的表示。
clipBehaviour：控制如何剪辑
clipper：如果非空，则确定要使用的剪辑。

例子：

在这里，我们将在我们的应用程序中剪辑以下图像：

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is
  //the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ClipOval',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePAGE(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class MyHomePAGE extends StatefulWidget {
  @override
  _MyHomePAGEState createState() => _MyHomePAGEState();
}
  
class _MyHomePAGEState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
          child: ClipRect(
            child: Align(
              alignment: Alignment.topCenter,
              heightFactor: 0.5,
              child: Image.network('https://picsum.photos/250?image=9'),
            ),
          )
      ),
      backgroundColor: Colors.lightBlue[50],
    );
  }
}
  
class MyClip extends CustomClipper {
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, 100, 100);
  }
  
  bool shouldReclip(oldClipper) {
    return false;
  }
}

输出：

解释：

首先将主应用程序初始化为无状态小部件。
其次，根据需要设计主要小部件。
使用脚手架小部件构建Appbar 。
现在使用脚手架小部件主体内的ClipRect小部件，并使用中心小部件将其放置在中间。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?