組件 - Image Text Icon

組件 - Image Text Icon

內容來自教程《Flutter技術入門與實戰》

無狀態組件和有狀態組件

參考：

• StatelessWidget class
• StatefulWidget
• 兩分鐘帶你掌握Flutter的StatelessWidget與StatefulWidget

Flutter中的StatelessWidget是一個不需要狀態更改的widget - 它沒有要管理的內部狀態。
當您描述的用戶界面部分不依賴於對象本身中的配置信息以及widget的BuildContext 時，無狀態widget非常有用。
AboutDialog, CircleAvatar和 Text 都是StatelessWidget的子類。

StatefulWidget 是可變狀態的widget。 使用setState方法管理StatefulWidget的狀態的改變。調用setState告訴Flutter框架，某個狀態發生了變化，Flutter會重新運行build方法，以便應用程序可以應用最新狀態。
狀態是在構建widget時可以同步讀取的信息可能會在widget的生命週期中發生變化。確保在狀態改變時及時通知狀態變化是widget實現者的責任。當widget可以動態更改時，需要使用StatefulWidget。 例如, 通過鍵入表單或移動滑塊來更改widget的狀態. 或者, 它可以隨時間變化 - 或者數據推送更新UI
Checkbox, Radio, Slider, InkWell, Form, 和 TextField 都是有狀態的widget，也是StatefulWidget的子類。

Image

參考：

• Image class
• BoxFit enum

其構造方法：

• new Image用於從ImageProvider獲取圖像
• new Image.asset加載資源圖片
• new Image.file加載本地圖片文件
• new Image.network加載網絡圖片
• new Image.memory 加載Uint8List資源圖片

如下，加載一個網絡圖片

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image'),
        ),
        body: ImageDemo(),
      ),
    );
  }
}

class ImageDemo extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: Image.network(
        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
        fit: BoxFit.fitWidth,
      ),
    );
  }
}

BoxFit.fitWidth表示顯示可能拉伸，可能裁剪，寬度充滿

Text

參考：

• Text class

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('文本組件'),
            ),
            body: Column(
              children: <Widget>[
                Text(
                  '紅色 + 黑色刪除線 + 25號',
                  style: TextStyle(
                    color: const Color(0xffff0000),
                    decoration: TextDecoration.lineThrough,
                    decorationColor: const Color(0xff000000),
                    fontSize: 25.0
                  ),
                ),
                Text(
                  '橙色 + 下劃線 + 24號',
                  style: TextStyle(
                    color: Color(0xffff9900),
                    decoration: TextDecoration.underline,
                    fontSize: 24.0
                  ),
                ),
                Text(
                  '虛線上劃線 + 23號 + 傾斜',
                  style: TextStyle(
                    decoration: TextDecoration.overline,
                    decorationStyle: TextDecorationStyle.dashed,
                    fontSize: 23.0,
                    fontStyle: FontStyle.italic
                  ),
                ),
                Text(
                  '24號 + 加粗',
                  style: TextStyle(
                    fontSize: 23.0,
                    fontStyle: FontStyle.italic,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 6.0
                  ),
                ),
                Text(
                  '123 \n 456 \n 789 \n',
                  maxLines: 2,
                  style: TextStyle(
                    fontSize: 25.0
                  ),
                )
              ],
            )

        )
    );
  }
}

Icon

參考：

• Icon class

Icon表示的是圖標組件，是不可交互的。如果要想交互，考慮使用IconButton

There must be an ambient Directionality widget when using Icon. Typically this is introduced automatically by the WidgetsApp or MaterialApp.
This widget assumes that the rendered icon is squared. Non-squared icons may render incorrectly.
使用圖標時，必須有一個環境方向性小部件。 通常，這是由WidgetsApp或MaterialApp自動引入的。
該小部件假定渲染的圖標爲正方形。 非正方形圖標可能會錯誤顯示。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image'),
        ),
        body: LayoutDemo()
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Icon(Icons.phone, color: Colors.green[500], size: 100);
  }
}