【Flutter 實(shí)戰(zhàn)】各種各樣形狀的組件

老孟導(dǎo)讀：Flutter中很多組件都有一個(gè)叫做shape的屬性蜈敢，類型是ShapeBorder羞酗，比如Button類、Card等組件核行，shape表示控件的形狀，系統(tǒng)已經(jīng)為我們提供了很多形狀蹬耘，對于沒有此屬性的組件芝雪，可以使用 Clip 類組件進(jìn)行裁減。

BeveledRectangleBorder

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

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

如果設(shè)置的半徑比控件還大惩系，就會變成菱形：

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

同理位岔，如果半徑設(shè)置為0，就是矩形堡牡。

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

Border

Border允許單獨(dú)設(shè)置每一個(gè)邊上的線條樣式.

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

設(shè)置全部

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: () {},
      )
image-20200522182443777

BorderDirectional

BorderDirectional和Border基本一樣抒抬，區(qū)別就是BorderDirectional帶有閱讀方向，大部分國家閱讀是從左到右晤柄，但有的國家是從右到左的擦剑，比如阿拉伯等。

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

CircleBorder

圓形

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

ContinuousRectangleBorder

連續(xù)的圓角矩形芥颈，直線和圓角平滑連續(xù)的過渡惠勒，和RoundedRectangleBorder相比裸弦，圓角效果會小一些窿春。

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

RoundedRectangleBorder

圓角矩形

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

StadiumBorder

類似足球場的形狀歹嘹，兩邊圓形澳眷，中間矩形

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

OutlineInputBorder

帶外邊框

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

UnderlineInputBorder

下劃線邊框

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

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,
      ),
    ),
  ),
)

全圖效果：

<img src="https://img-blog.csdnimg.cn/20200324160500474.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70" style="zoom:50%;" />

裁剪效果：

<img src="https://img-blog.csdnimg.cn/20200324160537832.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70" style="zoom:50%;" />

clipper參數(shù)定義裁剪規(guī)則献丑，下面具體介紹。

clipBehavior參數(shù)定義了裁剪的方式侠姑，只有子控件超出父控件的范圍才有裁剪的說法创橄，各個(gè)方式說明如下：

  • none：不裁剪，系統(tǒng)默認(rèn)值莽红，如果子組件不超出邊界妥畏，此值沒有任何性能消耗。
  • hardEdge：裁剪但不應(yīng)用抗鋸齒安吁，速度比none慢一點(diǎn)醉蚁，但比其他方式快。
  • antiAlias：裁剪而且抗鋸齒鬼店，此方式看起來更平滑网棍，比antiAliasWithSaveLayer快，比hardEdge慢妇智，通常用于處理圓形和弧形裁剪滥玷。
  • antiAliasWithSaveLayer：裁剪捌锭、抗鋸齒而且有一個(gè)緩沖區(qū)，此方式很慢罗捎，用到的情況比較少观谦。

ClipRRect

ClipRRect組件可以對子組件進(jìn)行圓角裁剪，默認(rèn)圓角半徑為0桨菜，注意ClipRRect有2個(gè)R豁状，不是上面介紹的ClipRect。

用法如下：

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

效果如圖：

<img src="https://img-blog.csdnimg.cn/20200324160615913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70" style="zoom:50%;" />

ClipOval

ClipOval裁剪為橢圓形倒得，橢圓形的大小為正切父組件泻红，因此如果父組件為正方形，切出來是圓形霞掺，用法如下：

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

效果如下：

<img src="https://img-blog.csdnimg.cn/20200324160734820.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70" style="zoom:50%;" />

ClipPath

ClipPath組件根據(jù)路徑進(jìn)行裁剪谊路，我們自定義裁剪路徑也可以使用系統(tǒng)提供的，用法如下：

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

shape參數(shù)是ShapeBorder類型菩彬，系統(tǒng)已經(jīng)定義了很多形狀缠劝，介紹如下：

  • RoundedRectangleBorder：圓角矩形

  • ContinuousRectangleBorder：直線和圓角平滑連續(xù)的過渡，和RoundedRectangleBorder相比骗灶，圓角效果會小一些惨恭。

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

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

    <img src="https://img-blog.csdnimg.cn/20200324160806686.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70" style="zoom:50%;" />

  • CircleBorder：圓形。

CustomClipper

CustomClipper并不是一個(gè)組件免都，而是一個(gè)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;
  }
}

效果如下：

<img src="https://img-blog.csdnimg.cn/20200324160835511.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70" style="zoom:50%;" />

我們還可以繪制五角星脓规，代碼如下：

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

  final double scale;

  double perDegree = 36;

  /// 角度轉(zhuǎn)弧度公式
  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參數(shù)表示間隔的點(diǎn)到圓心的縮放比例，五角星效果如下：

<img src="https://img-blog.csdnimg.cn/2020032416085643.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70" style="zoom:50%;" />

下面用動(dòng)畫動(dòng)態(tài)設(shè)置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個(gè)控件用法）：http://laomengit.com

歡迎加入Flutter交流群（微信：laomengit）抖拦、關(guān)注公眾號【老孟Flutter】：

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市舷暮，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌噩茄，老刑警劉巖下面，帶你破解...
    沈念sama閱讀 217,185評論 6贊 503
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異绩聘，居然都是意外死亡沥割，警方通過查閱死者的電腦和手機(jī)耗啦，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3贊 393
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來机杜，“玉大人帜讲，你說我怎么就攤上這事〗忿郑” “怎么了似将？”我有些...
    開封第一講書人閱讀 163,524評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長蚀苛。 經(jīng)常有香客問我在验，道長，這世上最難降的妖魔是什么堵未？ 我笑而不...
    開封第一講書人閱讀 58,339評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任腋舌，我火速辦了婚禮，結(jié)果婚禮上渗蟹，老公的妹妹穿的比我還像新娘块饺。我一直安慰自己，他們只是感情好雌芽，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,387評論 6贊 391
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布刨沦。 她就那樣靜靜地躺著，像睡著了一般膘怕。 火紅的嫁衣襯著肌膚如雪想诅。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,287評論 1贊 301
  • 城市分裂傳說
    那天岛心，我揣著相機(jī)與錄音来破，去河邊找鬼。 笑死忘古，一個(gè)胖子當(dāng)著我的面吹牛徘禁，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播髓堪，決...
    沈念sama閱讀 40,130評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼送朱，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了干旁？” 一聲冷哼從身側(cè)響起驶沼，我...
    開封第一講書人閱讀 38,985評論 0贊 275
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎争群，沒想到半個(gè)月后回怜，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,420評論 1贊 313
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡换薄，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,617評論 3贊 334
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年玉雾，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了翔试。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,779評論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡复旬，死狀恐怖垦缅，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情驹碍，我是刑警寧澤壁涎，帶...
    沈念sama閱讀 35,477評論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站幸冻，受9級特大地震影響粹庞，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜洽损，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,088評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一庞溜、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧碑定，春花似錦流码、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0贊 22
  • 一樁弒父案漫试，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至碘赖，卻和暖如春驾荣，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背普泡。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工播掷， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人撼班。 一個(gè)月前我還...
    沈念sama閱讀 47,876評論 2贊 370
  • 代替公主和親
    正文 我出身青樓歧匈，卻偏偏與公主長得像，于是被迫代替她去往敵國和親砰嘁。 傳聞我的和親對象是個(gè)殘疾皇子件炉，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,700評論 2贊 354