Flutter開發(fā)技巧RadialGradient中radius計算詳解

更新時間：2023年01月15日 11:36:58 作者：SoaringHeart

這篇文章主要為大家介紹了Flutter小技巧RadialGradient?中?radius?的計算詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

一、問題來源

項目中遇到 json 模型映射成 RadialGradient 組件的需求，其他參數(shù)正常傳遞即可；

唯獨 radius 參數(shù)效果有出入，總結(jié)記錄一下；

二、四種情況

通過 RadialGradient 參數(shù) center 可以分為四種情況，這四種情況分別對應四種 radius 的值：

1、情況一

Alignment.center,

貪婪模式下組件的寬高中最大值的一半/最小值的一半為 radius；否則radius是0.5;

【貪婪模式】

p>【非貪婪模式】

2、情況二

Alignment.centerLeft,
Alignment.centerRight,

【貪婪模式】

【非貪婪模式】

3、情況三

Alignment.topCenter,
Alignment.bottomCenter,

【貪婪模式】

【非貪婪模式】

4、情況四

Alignment.topLeft,
Alignment.topRight,
Alignment.bottomLeft,
Alignment.bottomRight,

【貪婪模式】

【非貪婪模式】

【使用對角線半徑】（注意左下角的一點點留白，基本實現(xiàn)全覆蓋）

三、實現(xiàn)源碼

GradientOfRadialDemo

import 'package:flutter/material.dart';
import 'package:flutter_templet_project/basicWidget/SectionHeader.dart';
import 'package:flutter_templet_project/extension/alignment_ext.dart';
import 'package:tuple/tuple.dart';
class GradientOfRadialDemo extends StatefulWidget {
  GradientOfRadialDemo({ Key? key, this.title}) : super(key: key);
  final String? title;
  @override
  _GradientOfRadialDemoState createState() => _GradientOfRadialDemoState();
}
class _GradientOfRadialDemoState extends State<GradientOfRadialDemo> {
  var maxWidth = double.infinity;
  var maxHeight = double.infinity;
  /// 是否是貪婪模式
  var isGreed = true;
  /// 是否使用對角線做半徑
  bool isDiagonal = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title ?? "$widget"),
          bottom: buildAppBottom(),
        ),
        body: Container(
          // height: 300,
          child: buildRadial(),
        ),
        // body: ListView(
        //   children: [
        //     SectionHeader.h4(title: 'RadialGradient',),
        //     buildRadial(),
        //   ],
        // )
    );
  }
  buildAppBottom() {
    return PreferredSize(
      preferredSize: Size(double.infinity, 50),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _buildDropdownButton(),
          _buildButton(
            text: "isGreed: ${isGreed.toString()}",
            onPressed: () {
              this.isGreed = !this.isGreed;
              setState(() {});
            },
          ),
          _buildButton(
            text: "isDiagonal: ${isDiagonal.toString()}",
            onPressed: () {
              this.isDiagonal = !this.isDiagonal;
              setState(() {});
            },
          ),
        ],
      )
    );
  }
  var _dropValue = AlignmentExt.allCases[0];
  var _radius = 0.5;
  _buildDropdownButton() {
    return DropdownButton<Alignment>(
      value: _dropValue,
      items: AlignmentExt.allCases.map((e) => DropdownMenuItem(
        child: Text(e.toString().split('.')[1]),
        value: e,
      ),
      ).toList(),
      onChanged: (Alignment? value) {
        if (value == null) return;
        _dropValue = value;
        setState(() {});
      },
    );
  }
  _buildButton({
    required String text,
    required VoidCallback onPressed
  }) {
    return TextButton(
      onPressed: onPressed,
      child: Center(
          child: Text(text,
            style: TextStyle(color: Colors.white),
          )
      ),
    );
  }
  Widget _buildBox({
    required String text,
    required Decoration decoration,
    double height: 100,
    double? width,
  }) {
    return LayoutBuilder(
      builder: (context, constraints) {
        this.maxWidth = constraints.maxWidth;
        this.maxHeight = constraints.maxHeight;
        return Container(
          // width: width,
          // height: height,
          margin: const EdgeInsets.all(8.0),
          decoration: decoration,
          alignment: Alignment.center,
          child: Text(text, style: TextStyle(color: Colors.white, fontSize: 16.0)),
        );
      }
    );
  }
  buildRadial() {
    var tuples = <Tuple2<Color, double>>[      Tuple2(Colors.red, 0.1),      Tuple2(Colors.blue, 0.3),      Tuple2(Colors.yellow, 0.5),      Tuple2(Colors.green, 1),    ];
    _radius = _dropValue.radiusOfRadialGradient(
      width: this.maxWidth,
      height: this.maxHeight,
      isGreed: this.isGreed,
      isDiagonal: this.isDiagonal
    ) ?? 0.5;
    print("_dropValue:${_dropValue} _radius:${_radius} maxWidth:${maxWidth} maxHeight:${maxHeight}");
    print("_radius: $_radius");
    return _buildBox(
      height: 100,
      text: 'RadialGradient',
      decoration: BoxDecoration(
        border: Border.all(),
        gradient: RadialGradient(
          // tileMode: this.tileMode,
          // tileMode: TileMode.mirror,
          radius: _radius,
          tileMode: TileMode.decal,
          center: _dropValue,
          // focal: Alignment.bottomCenter,
          colors: tuples.map((e) => e.item1).toList(),
          stops: tuples.map((e) => e.item2).toList(),
        ),
      ),
    );
  }
}

四、radiusOfRadialGradient 方法實現(xiàn)

//  AlignmentExtension.dart
//  flutter_templet_project
//
//  Created by shang on 2023/1/12 20:57.
//  Copyright ? 2023/1/12 shang. All rights reserved.
//
import 'dart:math' as math;
import 'package:flutter/cupertino.dart';
extension AlignmentExt on Alignment{
  /// 獲取雷達漸進色 radius
  /// isGreed 是否貪婪模式(貪婪模式用大半徑,否則小半徑)
  /// isDiagonal 四角是否使用對角線(為 true 則 isGreed 參數(shù)無效)
  double? radiusOfRadialGradient({
    required double? width,
    required double? height,
    bool isGreed = true,
    bool isDiagonal = true,
  }) {
    if(width == null || height == null
        || width <= 0 || height <= 0) {
      return null;
    }
    final max = math.max(width, height);
    final min = math.min(width, height);
    double result = 0.5;
    if([
      Alignment.center,
    ].contains(this)){
      result = isGreed == true ? max/min * 0.5 : 0.5;
    } else if ([
      Alignment.topCenter,
      Alignment.bottomCenter,
    ].contains(this)) {
      result = isGreed == true ? max/min : 0.5;
    } else if ([
      Alignment.topLeft,
      Alignment.topRight,
      Alignment.bottomLeft,
      Alignment.bottomRight
    ].contains(this)) {
      if (isDiagonal) {
        final tmp = math.sqrt(math.pow(max, 2) + math.pow(min, 2)).ceil();
        // result = isGreed == true ? tmp/min : max/min;
        result = tmp/min;
      } else {
        result = isGreed == true ? max/min : 1;
      }
    } else if ([
      Alignment.centerLeft,
      Alignment.centerRight,
    ].contains(this)) {
      result = isGreed == true ? 1 : max/min * 0.5;
    }
    return result;
  }
}

最后

項目中為了方便查看差異使用了 TileMode.decal 模式，正常使用默認模式即可；

github

以上就是Flutter小技巧RadialGradient 中 radius 的計算的詳細內(nèi)容，更多關于Flutter RadialGradient radius計算的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

Android使用view仿支付寶月賬單
這篇文章主要為大家詳細介紹了Android使用view仿支付寶月賬單，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-04-04
Android實現(xiàn)通話自動錄音
這篇文章主要為大家詳細介紹了Android實現(xiàn)通話自動錄音，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10
Android列表實現(xiàn)(3)_自定義列表適配器思路及實現(xiàn)代碼
Android 自定義列表適配器會提供很多的便利；下面的例子為使用自定義的列表適配器來顯示列表，感興趣的朋友可以研究下
2012-12-12
Android通過ViewModel保存數(shù)據(jù)實現(xiàn)多頁面的數(shù)據(jù)共享功能
這篇文章主要介紹了Android通過ViewModel保存數(shù)據(jù)實現(xiàn)多頁面的數(shù)據(jù)共享功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-11-11
Android activity堆棧及管理實例詳解
這篇文章主要介紹了Android activity堆棧及管理實例詳解的相關資料，非常不錯，具有參考借鑒價值，對android activity堆棧相關知識感興趣的朋友一起學習吧
2016-09-09
詳解Android：向服務器提供數(shù)據(jù)之get、post方式
本篇文章主要介紹了詳解Android：向服務器提供數(shù)據(jù)之get、post方式，具有一定的參考價值，有興趣的可以了解一下。
2017-03-03
Android中Market的Loading效果實現(xiàn)方法
這篇文章主要介紹了Android中Market的Loading效果實現(xiàn)方法,較為詳細的分析了Android中l(wèi)oading效果的相關布局及功能實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
Android 通過Intent使用Bundle傳遞對象詳細介紹
這篇文章主要介紹了Android 通過Intent使用Bundle傳遞對象詳細介紹的相關資料,并附實例代碼講解，具有一定的參考價值，需要的朋友可以參考下
2016-11-11
android H5本地緩存加載優(yōu)化的實戰(zhàn)
這篇文章主要介紹了android H5本地緩存加載優(yōu)化的實戰(zhàn)，幫助大家更好的理解和學習使用Android，感興趣的朋友可以了解下
2021-04-04
Android開發(fā)入門之Appwidget用法分析
這篇文章主要介紹了Android開發(fā)入門之Appwidget用法,較為詳細的分析了App Widget的概念、功能、創(chuàng)建、使用方法與相關注意事項,需要的朋友可以參考下
2016-07-07