flutter组件了解

MaterialApp组件

风格格式组件，一般为一个app最外层的组件
从源码看构造属性：

const MaterialApp({
    Key key,
    this.navigatorKey,
    this.home,
    this.routes = const <String, WidgetBuilder>{},
    this.initialRoute,
    this.onGenerateRoute,
    this.onUnknownRoute,
    this.navigatorObservers = const <NavigatorObserver>[],
    this.builder,
    this.title = '',
    this.onGenerateTitle,
    this.color,
    this.theme,
    this.darkTheme,
    this.locale,
    this.localizationsDelegates,
    this.localeListResolutionCallback,
    this.localeResolutionCallback,
    this.supportedLocales = const <Locale>[Locale('en', 'US')],
    this.debugShowMaterialGrid = false,
    this.showPerformanceOverlay = false,
    this.checkerboardRasterCacheImages = false,
    this.checkerboardOffscreenLayers = false,
    this.showSemanticsDebugger = false,
    this.debugShowCheckedModeBanner = true,
  })

主要属性：home（常用Scaffold）、theme（主题色）等

Container组件

容器组件，用于包裹其他组件，如：Image等。

从源码看构造属性：

Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  })

主要使用：child、color、decoration（背景）、width、height等

Text组件

文本组件，用于显示文本
从源码看构造属性：

const Text(this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  })

主要属性：textAlign（位置）、overflow（浮动）等

自定义组件

flutter中每一个组件都是一个类，所以我们的自定义组件就是新建一个类，然后根据实际情况继承statelessWidget或statefulWidget。

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('my Flutter Demo'),
        ),
        body: HomeContext(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

其返回的是一个Widget。

Image图片组件

图片组件有两种加载图片的方式：一种是加载远程图片、一种是加载本地图片。

远程图片

Image.network(
          "https://img.alicdn.com/tfs/TB1Wee3cR1D3KVjSZFyXXbuFpXa-860-80.jpg",
          height: 100,
          width: 100,
          fit: BoxFit.cover,              
        )

当然还有其他情况，比如：在背景中添加图片

decoration: BoxDecoration(
        color: Colors.blueGrey,
        border: Border.all(
          color: Colors.black,
          width: 2.0,
        ),
        image: DecorationImage(
          image: NetworkImage("https://img.alicdn.com/tfs/TB1Wee3cR1D3KVjSZFyXXbuFpXa-860-80.jpg"),
          fit: BoxFit.cover
        ),
        borderRadius: BorderRadius.circular(150),
      ),

本地图片

本地图片首先要在项目根目录下创建一个images文件夹然后在images下创建2.0x和3.0x目录。这个可以和android的mipmap对应下。

- android
- build
- ios
- images
    - 2.0x
    - 3.0x

然后在pubspec.yaml文件下把本地的图片配置下

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/ic_img_default.jpg

然后在代码中加载

child: Image.asset(
          "images/ic_img_default.jpg",
          height: 100,
          width: 100,
          fit: BoxFit.cover,
          ),

再介绍一个特殊的图片组件，ClipOval圆型图片组件，可以使用在头像等特殊的图片上。

 child: ClipOval(
        child: Image.asset(
          "images/ic_img_default.jpg",
          height: 100,
          width: 100,
          fit: BoxFit.cover,              
        ),
      ),

推荐学习途径：flutter中文网、B站上的视频