给 Web 开发者的 Flutter 指南 5

应用线性变换

#

想要将线性颜色渐变在 widget 的背景上应用，请将它嵌套在一个Containerwidget 中。接着将一个BoxDecoration对象传递至Container的decoration，然后使用BoxDecoration的gradient属性来变换背景填充内容。

变换「角度」基于Alignment (x, y)取值来定：

如果开始和结束的 x 值相同，变换将是垂直的 (0° | 180°)。

如果开始和结束的 y 值相同，变换将是水平的 (90° | 270°)。

垂直变换

<div class="red-box"> Lorem ipsum </div>

.grey-box { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center;}.red-box { padding: 16px; color: #ffffff; background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%);}

#

final container = Container( // grey box width: 320, height: 240, color: Colors.grey[300], child: Center( child: Container( // red box decoration: const BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment(0.0, 0.6), colors: <Color>[ Color(0xffef5350), Color(0x00ef5350), ], ), ), padding: const EdgeInsets.all(16), child: Text( 'Lorem ipsum', style: bold24Roboto, ), ), ),);

水平变换

<div class="red-box"> Lorem ipsum </div>

.grey-box { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center;}.red-box { padding: 16px; color: #ffffff; background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%);}

final container = Container( // grey box width: 320, height: 240, color: Colors.grey[300], child: Center( child: Container( // red box padding: const EdgeInsets.all(16), decoration: const BoxDecoration( gradient: LinearGradient( begin: Alignment(-1.0, 0.0), end: Alignment(0.6, 0.0), colors: <Color>[ Color(0xffef5350), Color(0x00ef5350), ], ), ), child: Text( 'Lorem ipsum', style: bold24Roboto, ), ), ),);