在屏幕上绘制渐变

Posted

技术标签:

【中文标题】在屏幕上绘制渐变【英文标题】:Paint an Gradient on screen 【发布时间】:2017-10-22 10:11:20 【问题描述】:

为了实现颜色选择器,我想绘制一个内部带有渐变颜色的矩形。我尝试使用带有DecoratedBox 的容器,但效果不佳,因为我必须给它一个宽度,并且我希望它填充它的父级。 在颤动中绘制渐变的最佳方法是什么?

【问题讨论】:

【参考方案1】:

听起来您已经知道如何绘制渐变,而您的问题更多是关于如何使DecoratedBox 尽可能大。

如果您的DecoratedBox 出现在ColumnRow 中,请考虑将其包装在Expanded 中并将crossAxisAlignment 设置为CrossAxisAlignment.stretch

如果您的DecoratedBox 是不为其子级提供大小的小部件的子级(例如Center),请尝试将其包装在ConstrainedBox 中,并使用constraintsnew BoxConstraints.expand()。这是一个例子:

import 'package:flutter/material.dart';

void main() 
  runApp(new MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      title: 'Gradient Example',
      home: new MyHomePage(),
    );
  


class MyHomePage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Gradient Example'),
      ),
      body: new Center(
        child: new ConstrainedBox(
          constraints: new BoxConstraints.expand(),
          child: new DecoratedBox(
            decoration: new BoxDecoration(
              gradient: new LinearGradient(
                colors: <Color>[Colors.red, Colors.blue]
              ),
            ),
          ),
        ),
      ),
    );
  

【讨论】:

以上是关于在屏幕上绘制渐变的主要内容,如果未能解决你的问题,请参考以下文章

OpenGL Stencil - 排除透明像素

Android绘图双缓存技术

Android绘图双缓存技术

如何在pygame上将角色绘制到屏幕上

iOS 8 - 启动屏幕文件的背景渐变

如何使用 Qt 在屏幕上绘制选择矩形?