Flutter(十一)之封裝幾個小Widget

更新地點： 首發於公眾號，第二天更新於掘金、思否、開發者頭條等地方；

更多交流： 可以新增我的微信 372623326，關注我的微博：coderwhy

學習完列表渲染後，我打算做一個綜合一點的練習小專案：豆瓣Top電影排行列表；

這個練習小專案主要是為了鍛鍊佈局Widget，但是也涉及到一些其他知識點：評分展示、分割線、bottomNavigationBar等。

這些內容，我們放到後面進行補充，但是在進行豆瓣Top電影模仿時，有兩個東西實現起來比較複雜：

1、評分展示： 我們需要根據不同的評分顯示不同的星級展示，這裡我封裝了一個StarRating的小Widget來實現；

2、分割線： 最初我考慮使用邊框虛線來完成分割線，後來發現Flutter並不支援虛線邊框，因此封裝了一個DashedLine的小Widget來實現。

當然，這個章節如果你覺得過於複雜，可以直接把我封裝好的兩個東西拿過去使用；

一. StarRating

1.1. 最終效果展示

目的：實現功能展示的同時，提供高度的定製效果

• rating：必傳引數，告訴Widget當前的評分。
• maxRating：可選引數，最高評分，根據它來計算一個比例，預設值為10；
• size：星星的大小，決定每一個star的大小；
• unselectedColor：未選中星星的顏色（該屬性是使用預設的star才有效）；
• selectedColor：選中星星的顏色（該屬性也是使用預設的star才有效）；
• unselectedImage：定製未選中的star；
• selectedImage：定義選中時的star；
• count：展示星星的個數；

暫時實現上面的定製，後續有新的需求繼續新增新的功能點~

1.2. 實現思路分析

理清楚思路後，你會發現並不是非常複雜，主要就是兩點的展示：

• 未選中star的展示：根據個數和傳入的unselectedImage建立對應個數的Widget即可；
• 選中star的展示：
  • 計算出滿star的個數，建立對應的Widget；
  • 計算剩餘比例的評分，對最後一個Widget進行裁剪；

問題一：選擇StatelessWidget還是StatefulWidget？

考慮到後面可能會做使用者點選進行評分或者使用者手指滑動評分的效果，所以這裡選擇StatefulWidget

• 目前還沒有講解事件監聽相關，所以暫時不新增這個功能

問題二：如何讓選中的star和未選中的star重疊顯示？

• 非常簡單，使用Stack即可；

child: Stack(
  children: <Widget>[
    Row(children: getUnSelectImage(), mainAxisSize: MainAxisSize.min,),
    Row(children: getSelectImage(), mainAxisSize: MainAxisSize.min,),
  ],
),
複製程式碼

問題三：如何實現對選中的最後一個star進行裁剪？

• 可以使用ClipRect定製CustomClipper進行裁剪

定義CustomClipper裁剪規則：

class MyRectClipper extends CustomClipper<Rect>{
  final double width;

  MyRectClipper({
    this.width
  });

  @override
  Rect getClip(Size size) {
    return Rect.fromLTRB(0, 0, width, size.height);
  }

  @override
  bool shouldReclip(MyRectClipper oldClipper) {
    return width != oldClipper.width;
  }
}
複製程式碼

使用MyRectClipper進行裁剪：

Widget leftStar = ClipRect(
  clipper: MyRectClipper(width: leftRatio * widget.size),
  child: widget.selectedImage,
);
複製程式碼

1.3. 最終程式碼實現

最終程式碼並不複雜，而且我也有給出主要註釋：

import 'package:flutter/material.dart';

class HYStarRating extends StatefulWidget {
  final double rating;
  final double maxRating;
  final Widget unselectedImage;
  final Widget selectedImage;
  final int count;
  final double size;
  final Color unselectedColor;
  final Color selectedColor;

  HYStarRating({
    @required this.rating,
    this.maxRating = 10,
    this.size = 30,
    this.unselectedColor = const Color(0xffbbbbbb),
    this.selectedColor = const Color(0xffe0aa46),
    Widget unselectedImage,
    Widget selectedImage,
    this.count = 5,
  }): unselectedImage = unselectedImage ?? Icon(Icons.star, size: size, color: unselectedColor,),
        selectedImage = selectedImage ?? Icon(Icons.star, size: size, color: selectedColor);

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

class _HYStarRatingState extends State<HYStarRating> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: <Widget>[
          Row(children: getUnSelectImage(), mainAxisSize: MainAxisSize.min),
          Row(children: getSelectImage(), mainAxisSize: MainAxisSize.min),
        ],
      ),
    );
  }

  // 獲取評星
  List<Widget> getUnSelectImage() {
    return List.generate(widget.count, (index) => widget.unselectedImage);
  }

  List<Widget> getSelectImage() {
    // 1.計算Star個數和剩餘比例等
    double oneValue = widget.maxRating / widget.count;
    int entireCount = (widget.rating / oneValue).floor();
    double leftValue = widget.rating - entireCount * oneValue;
    double leftRatio = leftValue / oneValue;

    // 2.獲取start
    List<Widget> selectedImages = [];
    for (int i = 0; i < entireCount; i++) {
      selectedImages.add(widget.selectedImage);
    }

    // 3.計算
    Widget leftStar = ClipRect(
      clipper: MyRectClipper(width: leftRatio * widget.size),
      child: widget.selectedImage,
    );
    selectedImages.add(leftStar);

    return selectedImages;
  }
}


class MyRectClipper extends CustomClipper<Rect>{
  final double width;

  MyRectClipper({
    this.width
  });

  @override
  Rect getClip(Size size) {
    return Rect.fromLTRB(0, 0, width, size.height);
  }

  @override
  bool shouldReclip(MyRectClipper oldClipper) {
    return width != oldClipper.width;
  }
}
複製程式碼

二. DashedLine

2.1. 最終實現效果

目的：實現效果的同時，提供定製，並且可以實現水平和垂直兩種虛線效果：

• axis：確定虛線的方向；
• dashedWidth：根據虛線的方向確定自己虛線的寬度；
• dashedHeight：根據虛線的方向確定自己虛線的高度；
• count：內部會根據設定的個數和寬高確定密度（虛線的空白間隔）；
• color：虛線的顏色，不多做解釋；

暫時實現上面的定製，後續有新的需求繼續新增新的功能點~

2.2. 實現思路分析

實現比較簡單，主要是根據使用者傳入的方向確定新增對應的SizedBox即可。

這裡有一個注意點：虛線到底是設定多寬或者多高呢？

• 我這裡是根據方向獲取父Widget的寬度和高度來決定的；
• 通過LayoutBuilder可以獲取到父Widget的寬度和高度；

return LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    // 根據寬度計算個數
    return Flex(
      direction: this.axis,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: List.generate(this.count, (int index) {
        return SizedBox(
          width: dashedWidth,
          height: dashedHeight,
          child: DecoratedBox(
            decoration: BoxDecoration(color: color),
          ),
        );
      }),
    );
  },
);
複製程式碼

2.3. 最終程式碼實現

比較簡單的封裝，直接給出最終程式碼實現：

class HYDashedLine extends StatelessWidget {
  final Axis axis;
  final double dashedWidth;
  final double dashedHeight;
  final int count;
  final Color color;

  HYDashedLine({
    @required this.axis,
    this.dashedWidth = 1,
    this.dashedHeight = 1,
    this.count,
    this.color = const Color(0xffff0000)
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        // 根據寬度計算個數
        return Flex(
          direction: this.axis,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: List.generate(this.count, (int index) {
            return SizedBox(
              width: dashedWidth,
              height: dashedHeight,
              child: DecoratedBox(
                decoration: BoxDecoration(color: color),
              ),
            );
          }),
        );
      },
    );
  }
}
複製程式碼

三. 實現底部TabBar

3.1. TabBar實現說明

在即將完成的小練習中，我們有實現一個底部的TabBar，如何實現呢？

在Flutter中，我們會使用Scaffold來搭建頁面的基本結構，實際上它裡面有一個屬性就可以實現底部TabBar功能：bottomNavigationBar。

bottomNavigationBar對應的型別是BottomNavigationBar，我們來看一下它有什麼屬性：

• 屬性非常多，但是都是設定底部TabBar相關的，我們介紹幾個：
• currentIndex：當前選中哪一個item；
• selectedFontSize：選中時的文字大小；
• unselectedFontSize：未選中時的文字大小；
• type：當item的數量超過2個時，需要設定為fixed；
• items：放入多個BottomNavigationBarItem型別；
• onTap：監聽哪一個item被選中；

class BottomNavigationBar extends StatefulWidget {
  BottomNavigationBar({
    Key key,
    @required this.items,
    this.onTap,
    this.currentIndex = 0,
    this.elevation = 8.0,
    BottomNavigationBarType type,
    Color fixedColor,
    this.backgroundColor,
    this.iconSize = 24.0,
    Color selectedItemColor,
    this.unselectedItemColor,
    this.selectedIconTheme = const IconThemeData(),
    this.unselectedIconTheme = const IconThemeData(),
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
    this.selectedLabelStyle,
    this.unselectedLabelStyle,
    this.showSelectedLabels = true,
    bool showUnselectedLabels,
  }) 
}
複製程式碼

當實現了底部TabBar展示後，我們需要監聽它的點選來切換顯示不同的頁面，這個時候我們可以使用IndexedStack來管理多個頁面的切換：

body: IndexedStack(
  index: _currentIndex,
  children: <Widget>[
    Home(),
    Subject(),
    Group(),
    Mall(),
    Profile()
  ],
複製程式碼

3.2. TabBar程式碼實現

注意事項：

• 1、我們需要在其他地方建立對應要切換的頁面；
• 2、需要引入對應的資源，並且在pubspec.yaml中引入；

import 'package:flutter/material.dart';
import 'views/home/home.dart';
import 'views/subject/subject.dart';
import 'views/group/group.dart';
import 'views/mall/mall.dart';
import 'views/profile/profile.dart';


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "豆瓣",
      theme: ThemeData(
        primaryColor: Colors.green,
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent
      ),
      home: MyStackPage(),
    );
  }
}

class MyStackPage extends StatefulWidget {
  @override
  _MyStackPageState createState() => _MyStackPageState();
}

class _MyStackPageState extends State<MyStackPage> {

  var _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        selectedFontSize: 14,
        unselectedFontSize: 14,
        type: BottomNavigationBarType.fixed,
        items: [
          createItem("home", "首頁"),
          createItem("subject", "書影音"),
          createItem("group", "小組"),
          createItem("mall", "市集"),
          createItem("profile", "我的"),
        ],
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
      body: IndexedStack(
        index: _currentIndex,
        children: <Widget>[
          Home(),
          Subject(),
          Group(),
          Mall(),
          Profile()
        ],
      ),
    );
  }
}

BottomNavigationBarItem createItem(String iconName, String title) {
  return BottomNavigationBarItem(
      icon: Image.asset("assets/images/tabbar/$iconName.png", width: 30,),
      activeIcon: Image.asset("assets/images/tabbar/${iconName}_active.png", width: 30,),
      title: Text(title)
  );
}
複製程式碼

備註：所有內容首發於公眾號，之後除了Flutter也會更新其他技術文章，TypeScript、React、Node、uniapp、mpvue、資料結構與演算法等等，也會更新一些自己的學習心得等，歡迎大家關注