Flutter Widgets 之 Opacity和AnimatedOpacity

注意：無特殊說明，Flutter版本及Dart版本如下：

Flutter版本： 1.12.13+hotfix.5

Dart版本： 2.7.0

Flutter中移除一個控件非常容易，只需要在重新創建中移除即可，如果想要移除控件同時它的位置依然保留，類似于Android中View的invisible，比如Row中有3個顏色塊，分別為1、2、3，代碼如下：

Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          height: 80,
          width: 80,
          color: Colors.red,
          alignment: Alignment.center,
          child: Text('1',style: TextStyle(color: Colors.white),),
        ),
        Container(
          height: 80,
          width: 80,
          color: Colors.green,
          alignment: Alignment.center,
          child: Text('2',style: TextStyle(color: Colors.white),),
        ),
        Container(
          height: 80,
          width: 80,
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text('3',style: TextStyle(color: Colors.white),),
        ),
      ],
    )

效果如下：

這時想要移除2，同時還保留2的位置，可以使用Opacity控件實現，代碼如下：

Opacity(
      opacity: 0.0,
      child:  Container(
        height: 80,
        width: 80,
        color: Colors.green,
        alignment: Alignment.center,
        child: Text('2',style: TextStyle(color: Colors.white),),
      ),
    )

效果如下：

使用Opacity控件和另一個控件層疊在一起，將會出現“蒙層效果”：

Stack(
      children: <Widget>[
        Image.network(
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582204321233&di=ac7e8572222e1781cef5ad3add4daead&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn15%2F275%2Fw640h435%2F20181010%2Fcaba-hkrzvkw4936632.jpg',
        ),
        Positioned.fill(
          child: Opacity(
            opacity: 0.5,
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [Colors.white, Colors.blue],
                    begin: Alignment.bottomCenter,
                    end: Alignment.topCenter),
              ),
            ),
          ),
        ),
      ],
    )

效果如下：

甚至我們可以使用AnimatedOpacity控件實現動畫效果:

bool click = false;
AnimatedOpacity(
      onEnd: () {
        setState(() {
          click = !click;
        });
      },
      duration: Duration(seconds: 3),
      opacity: click ? 0.2 : 0.8,
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.white, Colors.grey],
          ),
        ),
      ),
    )

動畫效果：

如果這篇文章有幫助到您，希望您關注我的公眾號，謝謝。

本文鏈接：https://blog.csdn.net/mengks1987/article/details/104416468

智能推薦

Flutter 基礎Widgets Text()之TextStyle詳解

Text概述即一個單一樣式的文本 Text Widget就是顯示單一樣式的文本字符串。字符串可能會跨越多行，也可能全部顯示在同一行上，具體取決于布局約束。 style參數可選。如果省略了，文本將使用最近的DefaultTextStyle的樣式。如果給定樣式的TextStyle.inherit屬性為true（默認值），則給定樣式將與最近的DefaultTextStyle合并。例如，比如可以在使用默...

Flutter 基礎布局Widgets之Stack詳解

概述 Stack 組件是一種層疊式布局，即組件覆蓋另一個組件，覆蓋的順序取決于在children中放置的順序，使用場景比如在圖片上加上一些文字描述，即將文本Widget覆蓋在圖片組件，詳見下面的小例。構造函數 alignment 子Widgets們的對齊方式 textDirection 文本的方向，默認當然是 left-to-right fit 子Widgets的放置方式，默認loose 子Wi...

Flutter 基礎布局Widgets之Row詳解

概述 Row即創建一個水平的組件列表，是非常常用的組件，而Column即創建一個垂直的組件列表，用法和Row一模一樣，因為Row以及Column都是Flex的子類，它們的具體實現也都是由Flex完成，只是參數不同。構造函數 mainAxisAlignment 在flex布局中，子元素應該如何沿著主軸放置,即各個組件的放置的方式，比如MainAxisAlignment.start 組件都盡量靠近...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...