image

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,   //每行个数
    mainAxisSpacing: 2.0,   //每行间距
    crossAxisSpacing: 2.0,  //每列间距
    childAspectRatio: 0.7  //长宽比
  ),

 GridView.count(
    padding: const EdgeInsets.all(10.0),
    crossAxisSpacing: 10.0,
    crossAxisCount: 3,
    children: <Widget>[
      const Text('I love'),
      const Text('I love'),
      const Text('I love'),
      const Text('I love'),
      const Text('I love'),
      const Text('I love'),
    ],
),

void main() => runApp(MyApp(
  items: List<String>.generate(1000, (i)=>'item $i')
));

class MyApp extends StatelessWidget{

  final List<String> items;
  MyApp({Key key, @required this.items}): super(key:key);

body: ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index){
      return ListTile(
          title: Text('${items[index]}'),
      );
    },
)

body: ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.favorite_border),
      title: Text('favorite_border'),
      trailing: Icon(Icons.arrow_forward),
    ),ListTile(
      leading: Icon(Icons.favorite),
      title: Text('favorite'),
      trailing: Icon(Icons.arrow_forward),
    ),ListTile(
      leading: Icon(Icons.ac_unit),
      title: Text('ac_unit'),
      trailing: Icon(Icons.arrow_forward),
    ),ListTile(
      leading: Icon(Icons.android),
      title: Text('android'),
      trailing: Icon(Icons.arrow_forward),
    ),
    Image.network("https://img1.sycdn.imooc.com//szimg/5e4644f609ffdfa312000676-360-202.png"),
    Image.network("https://img1.sycdn.imooc.com//szimg/5e703f1408bd81a506000338-360-202.jpg"),
    Image.network("https://img1.sycdn.imooc.com//szimg/5e5621d0092c054612000676-360-202.png"),
    Image.network("https://img1.sycdn.imooc.com//szimg/5d1032ab08719e0906000338-360-202.jpg"),
    Image.network("https://img1.sycdn.imooc.com//szimg/5e6b4ede09bc3b4412000676-360-202.png"),
  ],
),

Image图片组件的使用

• Image Widget的几种加入形式

1. Image.asset：加载资源图片，会使打包时包体过大

2. Image.network：网络资源图片，经常换的或者动态的图片

3. Image.file:本地图片，比如相机照相后的图片预览

4. Image.memory:加载到内存中的图片，Uint8List
   

• Fit属性的详细讲解，（相当于小程序的mode）

1. fit: BoxFit.（）,

• 图片的混合模式

1. colorBlendMode: BlendMode.color

• Repeat属性让图片重复

1. repeat: ImageRepeat.（）,

decoration: new BoxDecoration(
  gradient: const LinearGradient(
      colors: [
        Colors.purple,
        Colors.orange,
        Colors.cyan,
        Colors.deepPurple,
        Colors.pink,
        Colors.cyanAccent,
        Colors.redAccent,
        Colors.limeAccent
      ])
),

渐变

Contains容器2

• padding内边距属性

• margin外边距属性

• decoration属性制作彩色背景

一，padding，margin内边距属性

1. edgelnsets.all():统一设置

2. Edgelnsets.fromLTRB(value1,value2,value3)

   
   

二，decoration修饰器（不能与color一起，不然冲突）

1. 设置容器的边框

2. BoxDecoration Widget讲解

3. LinearGradient设置背景颜色渐变

Container 有点类似Layout

Container(
  child: Text('Hello Flutter',
  style:TextStyle(fontSize: 50.0,
      color:Colors.orange),),
  alignment: Alignment.center,
  width: 300.0,
  height: 400.0,
  color: Colors.purple,
)

TextWidget文本组件

TextAlign：文本对齐属性

left/right/start/end 

maxLines：文本显示的最大行数

overflow：控制文本的溢出效果

clip：直接截断

ellipsis：省略号

fade： 

字体设置

style:TextStyle

fontSize: 18.0

color:Color.fromARGB(255,255,150,0)

decoration:TextDecoration.underline  下划线

decorationStyle:TextDecorationStyle.solid 实线

3-1 Flutter一切皆组件。 TextWidget的常用属性 TextAlign:文本对齐方式 textAlign:TextAlian.left(center,right,start,end), maxLines:文本显示的最大行数 overflow:控制文本的溢出效果 ocerflow:TextOverflow.clip(ellipsis,fade), Style的属性用法 style:TextStyle( fontSize:~,0, color:Color.fromARGB(A,R,G,B) decoration:TextDecoration.underline(none,libeThrongh,overline) decorationStyle:TextDecorationStyle.soild )

120fps

生态环境

服拉特