簡介

Opacity：改變child widget的透明度.

Opacity(
  opacity: ...,
  child: Text("呵呵"),
)
複製程式碼

opacity屬性的值的範圍在0.0到1.0之間。0代表完全透明，1代表完全不透明。 有時候也可以使用Opacity來實現Widget的隱藏與顯示。

示例

class TestUi extends StatefulWidget {
  const TestUi({Key key}) : super(key: key);

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

class _TestUiState extends State<TestUi> {
  /// 透明度從0.0到1.0
  var _opacity = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('改變透明度',style: TextStyle(fontSize: )),
      ),
      body: Container(
        child: Column(
          children: [
            Opacity(
              opacity: _opacity,
              child: Center(child: Text("呵呵")),
            ),
            Slider(
                value: _opacity,
                min: 0.0,
                max: 1.0,
                onChanged: (value) {
                  /// 通過滑塊來控制透明度
                  setState(() {
                    _opacity = value;
                  });
                }),
          ],
        ),
      ),
    );
  }
}
複製程式碼

效能建議

官方給出的建議是不到萬不得已，就不要用Opacity。 因為Opacity會將內容繪製到離屏緩衝區可能會觸發渲染目標的切換。在很早之前的裝置上，gpu會處理的特別慢。

只改變顏色透明度

如果只是想改變Image或者color的透明度，完全沒必要使用Opacity。直接使用RGB改變透明度即可。

示例

Container(
  /// 最後一個引數代表透明度
  color: Color.fromRGBO(255, 22, 33, _opacity),
  child: Text("改變背景色的透明度"),
),
Slider(
    value: _opacity,
    min: 0.0,
    max: 1.0,
    onChanged: (value) {
      setState(() {
        _opacity = value;
      });
    }),
複製程式碼

AnimatedOpacity

如果使用Opacity時，需要頻繁改動透明度，建議使用AnimatedOpacity,效能更好。 每次透明度改變時，都會有一個過渡效果，不會感覺到改變的很生硬。

AnimatedOpacity(
  opacity: _opacity,
  duration: Duration(milliseconds: 500),
  child: Center(
      child: Text(
    "Hello,world!",
    style: TextStyle(fontSize: 30),
  )),
),
Slider(
    value: _opacity,
    min: 0.0,
    max: 1.0,
    onChanged: (value) {
      setState(() {
        _opacity = value;
      });
    }),
複製程式碼