组件 - Image Text Icon

内容来自教程《Flutter技术入门与实战》

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);
  }
}