flutter常用组件学习

text文本组件

child: Text(
  'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsi.',
  textAlign: TextAlign.start,
  maxLines: 2,
  // overflow: TextOverflow.clip,
  // overflow: TextOverflow.fade,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(
    fontSize: 16.0,
    color: Color.fromARGB(255, 125, 0, 1),
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.solid
  ),
),

Container组件

此组件有点类型html中的div

 child: Container(
  child: new Text(
    'hello wutianci',
    style: TextStyle(
      fontSize: 40.0,
      color: Color.fromRGBO(255, 255, 255, 1),
    ),
  ),
  alignment: Alignment.topLeft,
  width: 500.0,
  height: 400.0,
  color: Colors.lightBlue,
  // padding: const EdgeInsets.all(10.0),
  padding: const EdgeInsets.fromLTRB(20.0, 10.0, 0, 0),
  margin: const EdgeInsets.all(10.0),
  decoration: new BoxDecoration(
    gradient: const LinearGradient(
      colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
    )
  ),
),

Image组件

child: Container(
  child: new Image.network(
    'https://avatars2.githubusercontent.com/u/9635737',
    // repeat: ImageRepeat.noRepeat,
    repeat: ImageRepeat.repeat,
    /* 混合
    // color: Colors.greenAccent,
    // colorBlendMode: BlendMode.darken,
    // colorBlendMode: BlendMode.colorDodge,
    // colorBlendMode: BlendMode.difference,
    */
    // fit: BoxFit.contain,
    // fit: BoxFit.fill,
    // fit: BoxFit.fitWidth
    fit: BoxFit.cover
  ),
  width: 300.0,
  height: 200.0,
  color: Colors.lightBlue
),

ListView组件

body: new ListView(
   // children: <Widget>[
   //   new ListTile(
   //     leading: new Icon(Icons.perm_camera_mic),
   //     title: new Text('perm_camera_mic'),
   //   ), new ListTile(
   //     leading: new Icon(Icons.add_call),
   //     title: new Text('add_call'),
   //   ), new ListTile(
   //     leading: new Icon(Icons.access_time),
   //     title: new Text('access_time'),
   //   )
   // ],
   children: <Widget>[
     new Image.network('https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=77d1cd475d43fbf2da2ca023807fca1e/9825bc315c6034a8ef5250cec5134954082376c9.jpg'),
     new Image.network('https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=77d1cd475d43fbf2da2ca023807fca1e/9825bc315c6034a8ef5250cec5134954082376c9.jpg'),
     new Image.network('https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=77d1cd475d43fbf2da2ca023807fca1e/9825bc315c6034a8ef5250cec5134954082376c9.jpg'),
     new Image.network('https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=77d1cd475d43fbf2da2ca023807fca1e/9825bc315c6034a8ef5250cec5134954082376c9.jpg'),
   ],
 ),

完整代码

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'text to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('text a to flutter'),
        ),
        body: Center(
          child: Container(
            child: new Image.network(
              'https://avatars2.githubusercontent.com/u/9635737',
              // repeat: ImageRepeat.noRepeat,
              repeat: ImageRepeat.repeat,
              // color: Colors.greenAccent,
              // colorBlendMode: BlendMode.darken,
              // colorBlendMode: BlendMode.colorDodge,
              // colorBlendMode: BlendMode.difference,
              // fit: BoxFit.contain,
              // fit: BoxFit.fill,
              // fit: BoxFit.fitWidth
              fit: BoxFit.cover
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue
          ),
        ),
      )
    );
  }
}