在屏幕上绘制渐变
Posted
技术标签:
【中文标题】在屏幕上绘制渐变【英文标题】:Paint an Gradient on screen 【发布时间】:2017-10-22 10:11:20 【问题描述】:为了实现颜色选择器,我想绘制一个内部带有渐变颜色的矩形。我尝试使用带有DecoratedBox
的容器,但效果不佳,因为我必须给它一个宽度,并且我希望它填充它的父级。
在颤动中绘制渐变的最佳方法是什么?
【问题讨论】:
【参考方案1】:听起来您已经知道如何绘制渐变,而您的问题更多是关于如何使DecoratedBox
尽可能大。
如果您的DecoratedBox
出现在Column
或Row
中,请考虑将其包装在Expanded
中并将crossAxisAlignment
设置为CrossAxisAlignment.stretch
。
如果您的DecoratedBox
是不为其子级提供大小的小部件的子级(例如Center
),请尝试将其包装在ConstrainedBox
中,并使用constraints
或new 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]
),
),
),
),
),
);
【讨论】:
以上是关于在屏幕上绘制渐变的主要内容,如果未能解决你的问题,请参考以下文章