flutterメモ(五)----アイコンIcon

flutterノート(一)----公式例&コード解読flutterノート(二)----hello worldとテキストコンポーネントText、TextSpan flutterノート(三)----容器コンポーネントContainer flutterノート(四)----画像Image flutterノート(五)----アイコンIcon flutterノート(六)----ボタン各種Button flutterノート(七)----チェックボックスCheckBoxCheckboxListTile flutterノート(8)----ラジオスイッチSwitch、SwitchListTile flutterノート(9)----ラジオボックスRadio、RadioListTile------初学の段階で、間違いや不足があれば補充を歓迎します.ありがとうございます.

const Icon(
  IconData icon,                          // 
 {                      
    Key key,
    double size,                          // 
    Color color,                          // 
    String semanticLabel,                   // 
    TextDirection textDirection            //icon ， 
  }
)

公式には4種類のicon Icons:ベースのアイコンが与えられています.IconButton:インタラクティブなアイコン、アイコンボタンです.IconTheme:アイコンに環境構成を提供します.ImageIcon:カスタムピクチャアイコン.

1、Icons

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: Icon(
            Icons.add,
            size: 50.0,
            color: Colors.blue
          )
        )
      )
    );
  }
}

比較的簡単で、フォントサイズの色を設定します.flutterにはmaterialのiconが内蔵されています.すべてのiconはここを見てください.google.com/icons/そのまま使えばいいです.(開かない?自分で何とかする)
カスタムフォントアイコン
materialが提供するアイコンを使いたくなくて、カスタマイズしたいですか?はい、次の1を見て、まずフォントを生成します:ここに行くことができますhttps://www.iconfont.cn/ここにも行けるhttps://icomoon.io/app/#/selectフォントアイコンパッケージをダウンロードし、解凍します.2、プロジェクトルートディレクトリの下にfontsフォルダを新設し、tff形式のフォントをフォルダの下に置く.3、pubspec.yamlにフォントを追加する

flutter:
  uses-material-design: true
  fonts:
    - family: myIcon  # 
      fonts:
        - asset: fonts/icomoon.ttf

4、フォントアイコンを使う

body: new Container(
  alignment: Alignment.center,
  child: Icon(
    IconData(
      0xe90c,                    // css ， `content` ， `0x` 
      fontFamily: 'myIcon'      // 
    )
  )
)

2、IconButton

Iconにはこの品物があり、Buttonにもこの品物があり、純潔ではありません.Iconに書いてください.次はButtonを書いて彼を書かないでください.

const IconButton({
  Key key,
  double iconSize: 24.0,                                        // 
  EdgeInsetsGeometry padding: const EdgeInsets.all(8.0),        // 
  AlignmentGeometry alignment: Alignment.center,                // 
  @required Widget icon,                                         // 
  Color color,                                                  // 
  Color focusColor,                                             // ?
  Color hoverColor,                                              // ？
  Color highlightColor,                                         // 
  Color splashColor,                                           // ， 
  Color disabledColor,                                          // 
  @require VoidCallback onPressed,                              // 
  FocusNode focusNode,                                          //
  String tooltip                                                 // 
})

コードをつけてdemoを見て

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: IconButton(
            icon: new Icon(Icons.add),
            iconSize: 24.0,
            padding: const EdgeInsets.all(4.0),
            alignment: Alignment.centerLeft,
            color: Colors.red,
            highlightColor: Colors.blue,
            splashColor: Colors.green,
            tooltip: 'test',
            onPressed: () {
              print(1);
            },
          )
        )
      )
    );
  }
}

これは丸いボタンです.focusNodeとfocusColorは併用されていると推測され、フォーカスが得られるノードと連動して、フォーカスを取得してアイコンの色を変更し、まだ実験されていないので、補足を歓迎します.tooltipは長押ししてからヒントが現れ、クリックしても現れず、highlightColorも長押しなければならない.hoverColorはデスクトップ側とweb側で使われていると推測され、結局モバイル側はhoverを出していない.iconSize/alignment/paddingを調整すると、IconButtonは一定の幅と高さの寸法があり、設定できないことがわかります.

3、IconTheme

この商品はchildとdataしかなく、dataに配置されています.

const IconThemeData({
  Color color,
  double opacity,
  double size
})

スタイルも多くないので、下にコードをつけて、使い方を見てください.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: IconTheme(
            data:  IconThemeData(color: Colors.red, opacity: 0.5, size: 30.0),
            child: Container(
              child: new Icon(Icons.add)
            )
          )
        )
      )
    );
  }
}

ここではIconThemeのサブノードが見えますが、必ずしもIconではありません.ここではContainerです.IconThemeは1つの装飾器に相当し、その下のすべてのアイコンスタイルを統一的に設定します.

4、ImageIcon

const ImageIcon(
  ImageProvider image,
  {
    Key key,
    double size,
    Color color,
    String semanticlabel
  }
)

1枚の画像でiconを作り、Imageとcolorの効果はほぼ同じで、どんな派手な画像でも純色にレンダリングされます.ここでは必ずpngという背景の透明な画像を使います.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: ImageIcon(
            AssetImage('images/logo.png'),
            color: Colors.red,
            size: 50.0
          )
        )
      )
    );
  }
}

Iconはここまででほぼ終わりました.