2. 程式人生 > 實用技巧 >【Flutter 實戰】各種各樣形狀的元件

【Flutter 實戰】各種各樣形狀的元件

阿新 • • 發佈：2020-09-09

老孟導讀：Flutter中很多元件都有一個叫做shape的屬性，型別是ShapeBorder，比如Button類、Card等元件，shape表示控制元件的形狀，系統已經為我們提供了很多形狀，對於沒有此屬性的元件，可以使用 Clip 類元件進行裁減。

BeveledRectangleBorder

斜角矩形邊框，用法如下：

RaisedButton(
  shape: BeveledRectangleBorder(
      side: BorderSide(width: 1, color: Colors.red),
      borderRadius: BorderRadius.circular(10)),
  child: Text('老孟'),
  onPressed: () {},
)

如果設定的半徑比控制元件還大，就會變成菱形：

 3RaisedButton(
  shape: BeveledRectangleBorder(
      side: BorderSide(width: 1, color: Colors.red),
      borderRadius: BorderRadius.circular(100)),
  child: Text('老孟'),
  onPressed: () {},
)

同理，如果半徑設定為0，就是矩形。

RaisedButton(
  shape: BeveledRectangleBorder(
      side: BorderSide(width: 1, color: Colors.red),
      borderRadius: BorderRadius.circular(0)),
  child: Text('老孟'),
  onPressed: () {},
)

Border

Border允許單獨設定每一個邊上的線條樣式.

RaisedButton(
  shape: Border(
    top: BorderSide(color: Colors.red,width: 2)
  ),
  child: Text('老孟'),
  onPressed: () {},
)

設定全部

RaisedButton(
        shape: Border(
          top: BorderSide(color: Colors.red,width: 10),
          right: BorderSide(color: Colors.blue,width: 10),
          bottom: BorderSide(color: Colors.yellow,width: 10),
          left: BorderSide(color: Colors.green,width: 10),
        ),
        child: Text('老孟'),
        onPressed: () {},
      )

BorderDirectional

BorderDirectional和Border基本一樣，區別就是BorderDirectional帶有閱讀方向，大部分國家閱讀是從左到右，但有的國家是從右到左的，比如阿拉伯等。

RaisedButton(
  shape: BorderDirectional(
    start: BorderSide(color: Colors.red,width: 2),
    end: BorderSide(color: Colors.blue,width: 2),
  ),
  child: Text('老孟'),
  onPressed: () {},
)

CircleBorder

圓形

RaisedButton(
  shape: CircleBorder(side: BorderSide(color: Colors.red)),
  child: Text('老孟'),
  onPressed: () {},
)

ContinuousRectangleBorder

連續的圓角矩形，直線和圓角平滑連續的過渡，和RoundedRectangleBorder相比，圓角效果會小一些。

RaisedButton(
  shape: ContinuousRectangleBorder(
      side: BorderSide(color: Colors.red),
      borderRadius: BorderRadius.circular(20)),
  child: Text('老孟'),
  onPressed: () {},
)

RoundedRectangleBorder

圓角矩形

RaisedButton(
  shape: RoundedRectangleBorder(
      side: BorderSide(color: Colors.red),
      borderRadius: BorderRadius.circular(10)),
  child: Text('老孟'),
  onPressed: () {},
)

StadiumBorder

類似足球場的形狀，兩邊圓形，中間矩形

RaisedButton(
  shape: StadiumBorder(
      side: BorderSide(color: Colors.red),),
  child: Text('老孟'),
  onPressed: () {},
)

OutlineInputBorder

帶外邊框

RaisedButton(
  shape: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.red),
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('老孟'),
  onPressed: () {},
)

UnderlineInputBorder

下劃線邊框

RaisedButton(
  shape: UnderlineInputBorder(
    borderSide: BorderSide(color: Colors.red),
  ),
  child: Text('老孟'),
  onPressed: () {},
)

ClipRect

ClipRect元件使用矩形裁剪子元件，通常情況下，ClipRect作用於CustomPaint 、 CustomSingleChildLayout 、 CustomMultiChildLayout 、 Align 、 Center 、 OverflowBox 、 SizedOverflowBox元件，例如ClipRect作用於Align，可以僅顯示上半部分，程式碼如下：

ClipRect(
  child: Align(
    alignment: Alignment.topCenter,
    heightFactor: 0.5,
    child: Container(
      height: 150,
      width: 150,
      child: Image.asset(
        'images/1.png',
        fit: BoxFit.cover,
      ),
    ),
  ),
)

全圖效果：

裁剪效果：

clipper引數定義裁剪規則，下面具體介紹。

clipBehavior引數定義了裁剪的方式，只有子控制元件超出父控制元件的範圍才有裁剪的說法，各個方式說明如下：

  • none：不裁剪，系統預設值，如果子元件不超出邊界，此值沒有任何效能消耗。
  • hardEdge：裁剪但不應用抗鋸齒，速度比none慢一點，但比其他方式快。
  • antiAlias：裁剪而且抗鋸齒，此方式看起來更平滑，比antiAliasWithSaveLayer快，比hardEdge慢，通常用於處理圓形和弧形裁剪。
  • antiAliasWithSaveLayer：裁剪、抗鋸齒而且有一個緩衝區，此方式很慢，用到的情況比較少。

ClipRRect

ClipRRect元件可以對子元件進行圓角裁剪，預設圓角半徑為0，注意ClipRRect有2個R，不是上面介紹的ClipRect。

用法如下：

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Container(
    height: 150,
    width: 150,
    child: Image.asset(
      'images/1.png',
      fit: BoxFit.cover,
    ),
  ),
)

效果如圖：

ClipOval

ClipOval裁剪為橢圓形，橢圓形的大小為正切父元件，因此如果父元件為正方形，切出來是圓形，用法如下：

ClipOval(
  child: Container(
    height: 150,
    width: 250,
    child: Image.asset(
      'images/1.png',
      fit: BoxFit.cover,
    ),
  ),
)

效果如下：

ClipPath

ClipPath元件根據路徑進行裁剪，我們自定義裁剪路徑也可以使用系統提供的，用法如下：

ClipPath.shape(
  shape: StadiumBorder(),
  child: Container(
    height: 150,
    width: 250,
    child: Image.asset(
      'images/1.png',
      fit: BoxFit.cover,
    ),
  ),
)

shape引數是ShapeBorder型別，系統已經定義了很多形狀，介紹如下：

  • RoundedRectangleBorder：圓角矩形

  • ContinuousRectangleBorder：直線和圓角平滑連續的過渡，和RoundedRectangleBorder相比，圓角效果會小一些。

  • StadiumBorder：類似於足球場的形狀，兩端半圓。

  • BeveledRectangleBorder：斜角矩形。效果如圖：

  • CircleBorder：圓形。

CustomClipper

CustomClipper並不是一個元件，而是一個abstract(抽象)類，使用CustomClipper可以繪製出任何我們想要的形狀，比如三角形，程式碼如下：

@override
Widget build(BuildContext context) {
  return Center(
    child: ClipPath(
      clipper: TrianglePath(),
      child: Container(
        height: 150,
        width: 250,
        child: Image.asset(
          'images/1.png',
          fit: BoxFit.cover,
        ),
      ),
    ),
  );
}

自定義TrianglePath程式碼如下：

class TrianglePath extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(size.width/2, 0);
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

效果如下：

我們還可以繪製五角星，程式碼如下：

class StarPath extends CustomClipper<Path> {
  StarPath({this.scale = 2.5});

  final double scale;

  double perDegree = 36;

  /// 角度轉弧度公式
  double degree2Radian(double degree) {
    return (pi * degree / 180);
  }

  @override
  Path getClip(Size size) {
    var R = min(size.width / 2, size.height / 2);
    var r = R / scale;
    var x = size.width / 2;
    var y = size.height / 2;

    var path = Path();
    path.moveTo(x, y - R);
    path.lineTo(x - sin(degree2Radian(perDegree)) * r,
        y - cos(degree2Radian(perDegree)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 2)) * R,
        y - cos(degree2Radian(perDegree * 2)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 3)) * r,
        y - cos(degree2Radian(perDegree * 3)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 4)) * R,
        y - cos(degree2Radian(perDegree * 4)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 5)) * r,
        y - cos(degree2Radian(perDegree * 5)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 6)) * R,
        y - cos(degree2Radian(perDegree * 6)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 7)) * r,
        y - cos(degree2Radian(perDegree * 7)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 8)) * R,
        y - cos(degree2Radian(perDegree * 8)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 9)) * r,
        y - cos(degree2Radian(perDegree * 9)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 10)) * R,
        y - cos(degree2Radian(perDegree * 10)) * R);
    return path;
  }

  @override
  bool shouldReclip(StarPath oldClipper) {
    return oldClipper.scale != this.scale;
  }
}

scale引數表示間隔的點到圓心的縮放比例，五角星效果如下：

下面用動畫動態設定scale，程式碼如下：

class StartClip extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _StartClipState();
}

class _StartClipState extends State<StartClip>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    _controller =
        AnimationController(duration: Duration(seconds: 2), vsync: this)
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              _controller.reverse();
            } else if (status == AnimationStatus.dismissed) {
              _controller.forward();
            }
          });
    _animation = Tween(begin: 1.0, end: 4.0).animate(_controller);
    _controller.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return ClipPath(
              clipper: StarPath(scale: _animation.value),
              child: Container(
                height: 150,
                width: 150,
                color: Colors.red,
              ),
            );
          }),
    );
  }
}

效果如下：

交流

老孟Flutter部落格地址（330個控制元件用法）：http://laomengit.com

歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】：

相關推薦

【Flutter 實戰】各種各樣形狀的元件

老孟導讀：Flutter中很多元件都有一個叫做shape的屬性，型別是ShapeBorder，比如Button類、Card等元件，shape表示控制元件的形狀，系統已經為我們提供了很多形狀，對於沒有此屬性的元件，可以使用 Clip 類元件進行

【Flutter實戰】定位裝飾權重元件及柱狀圖案例

老孟導讀：Flutter中有這麼一類元件，用於定位、裝飾、控制子元件，比如 Container (定位、裝飾)、Expanded (擴充套件)、SizedBox (固定尺寸)、AspectRatio (寬高比)、FractionallySizedBox (佔父元件比例)。這些元

【Flutter 實戰】一文學會20多個動畫元件

老孟導讀：此篇文章是 Flutter 動畫系列文章第三篇，後續還有動畫序列、過度動畫、轉場動畫、自定義動畫等。

【Flutter實戰】自定義滾動條

老孟導讀：【Flutter實戰】系列文章地址：http://laomengit.com/guide/introduction/mobile_system.html

【Flutter 實戰】簡約而不簡單的計算器

老孟導讀：這是 【Flutter 實戰】元件系列文章的最後一篇，其他元件地址：http://laomengit.com/guide/widgets/Text.html，接下來將會講解動畫系列，關注老孟，精彩不斷。

【Flutter 實戰】動畫核心

老孟導讀：動畫系統是任何一個UI框架的核心功能，也是開發者學習一個UI框架的重中之重，同時也是比較難掌握的一部分，下面我們就一層一層的揭開 Flutter 動畫的面紗。

宇智波程式筆記34-【Flutter 實戰】路由堆疊詳解

老孟導讀：Flutter中路由是非常重要的部分，任何一個應用程式都離不開路由管理，此文講解路由相關方法的使用和路由堆疊的變化。

【Flutter 實戰】pubspec.yaml 配置檔案詳解

老孟導讀：pubspec.yaml 檔案是 Flutter 中非常重要的配置檔案，下面就讓我們看看裡面各個配置的含義。

【springboot__實戰】

pom.xml ```

【專案實戰】Java開發微服務暢購商城實戰【全357集大專案】-附程式碼和課件

暢購是屬於B2C電商，系統後臺包括管理後臺和網站前臺。 專案的管理後臺採用前後 端分離的技術架構，後端微服務採用SmngBOOt、SprindClound、SmngMVC ，MyBatiS框架，

【Vue入門】頁面匯入元件的兩種方式（六）

上一節主要講了Home頁面的佈局及元件的引入 這節講元件的引入方式 一、第一種寫法：

android strudio使用list陣列傳引數_【Flutter 112】Flutter手把手教程Dart語言——什麼是泛型和泛型的使用場景...

技術標籤：android strudio使用list陣列傳引數 泛型 如果你檢視陣列的API文件，你會發現陣列List的實際型別為List。<> 符號表示陣列是一個泛型(或引數化型別)通常使用一個字母來代表型別引數，比如E、T

【kafka實戰】分割槽重分配可能出現的問題和排查問題思路(生產環境實戰,乾貨!!!非常幹!!!建議收藏)

@目錄前提所有異常情況1. TargetBroker若不線上,遷移指令碼執行會失敗情景演示2. TargetBroker在開始遷移過程中宕機，導致遷移任務一直在進行中情景演示解決方法3. 被遷移副本沒有找到Leader,導致TargetReplica一直

【Python實戰】Pandas：讓你像寫SQL一樣做資料分析（一）

1. 引言 Pandas是一個開源的Python資料分析庫。Pandas把結構化資料分為了三類： Series，1維序列，可視作為沒有column名的、只有一個column的DataFrame；

【專案實戰】天貓重複購買預測（02）資料探索

程式碼解讀 工具匯入和資料讀取 工具匯入 import numpy as np import pandas as pd import matplotlib.pyplot as plt

【SpringBoot實戰】開發入門--快速建立springboot程式

前言 本片部落格記錄快速建立springboot工程的兩種方式。一種是使用maven建立，一種是使用spring initializr建立。開發環境JDK1.8、IDEA、maven。

【SpringBoot實戰】核心配置和註解

前言 SpringBoot核心配置在springboot中有非常重要的作用，我們可是使用核心配置檔案進行一些基礎功能的定義，屬性值的注入等。springboot支援兩種格式的核心配置檔案，一種是properties和yaml，properties採用傳統的

【專案實戰】sass使用基礎篇（上）

Sass是一種CSS預處理語言。CSS預處理語言是一種新的專門的程式語言，編譯後形成正常的css檔案，為css增加一些程式設計特性，無需考慮瀏覽器的相容性（完全相容css3），讓css更加簡潔、適應性更強，可讀性更佳，更易於

【專案實戰】用Pytorch實現線性迴歸

視訊教程：https://www.bilibili.com/video/BV1Y7411d7Ys?p=5 準備資料 首先配置了環境變數，這裡使用python3.9.7版本，在Anaconda下構建環境執行，並且安裝pytorch

【專案實戰】pytorch實現邏輯斯蒂迴歸

視訊指導：https://www.bilibili.com/video/BV1Y7411d7Ys?p=6 一些資料集 在pytorch框架下，裡面面有配套的資料集，pytorch裡面有一個torchversion的包，他可以提供相應的，比如MNIST這種很基礎的資料集，但是安裝的