Flutter基础篇之组件

• 图片组件
  图片组件有Image实现，下面采用网络加载图片的方式

 child: new Image.network(
            'http://cdn.duitang.com/uploads/item/201409/08/20140908155026_RdUwH.thumb.700_0.jpeg',
            fit: BoxFit.contain,//图片展示的样式
            // color: Colors.greenAccent,//颜色混合模式
            // colorBlendMode: BlendMode.darken,
            repeat: ImageRepeat.repeatY,//图片在Y轴方向重复
          ),

效果如下图：

图片组件

• 文本组件

  
  
  文本展示样式

child: new Text('Hello 随风流年,随风流年是一个iOS程序员，如今正在学习flutter',
          textAlign: TextAlign.left,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,//文字溢出展示方式，省略号方式
          style: TextStyle(
            fontSize: 25.0,
            color: Color.fromARGB(255, 255, 125, 125),
            decoration: TextDecoration.underline,//下划线
            decorationStyle: TextDecorationStyle.solid,
          ),
          ),

• Container组件

 child: Container(
            
            alignment: Alignment.topLeft,//横向和纵向的对齐方式
            child: new Text('hello 随风流年',
            style: TextStyle(fontSize: 40.0,color: Color.fromARGB(255, 255, 100, 100),
            ),),
            width: 500.0,
            height: 400.0,
            // color: Colors.lightBlue,
            // padding: const EdgeInsets.all(10),
            padding: const EdgeInsets.fromLTRB(10, 50, 20, 30),//内边距
            margin: const EdgeInsets.all(10),//外边距
            decoration: new BoxDecoration(//颜色
              gradient: const LinearGradient(//线性颜色
                colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
              ),
              border: Border.all(width: 5.0,color: Colors.red)
            ),
),

Simulator Screen Shot - iPhone 11 Pro Max - 2019-10-08 at 16.41.58.png

• 整体代码如下：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new MaterialApp(
      title: '随风流年',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('随风流年'),
        ),
        body: new Center(
          
          child: new Text('Hello 随风流年,随风流年是一个iOS程序员，如今正在学习flutter',
          textAlign: TextAlign.left,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            fontSize: 25.0,
            color: Color.fromARGB(255, 255, 125, 125),
            decoration: TextDecoration.underline,
            decorationStyle: TextDecorationStyle.solid,
          ),
          ),
          /*
          child: Container(
            /*
            alignment: Alignment.topLeft,//横向和纵向的对齐方式
            child: new Text('hello 随风流年',
            style: TextStyle(fontSize: 40.0,color: Color.fromARGB(255, 255, 100, 100),
            ),),
            width: 500.0,
            height: 400.0,
            // color: Colors.lightBlue,
            // padding: const EdgeInsets.all(10),
            padding: const EdgeInsets.fromLTRB(10, 50, 20, 30),//内边距
            margin: const EdgeInsets.all(10),//外边距
            decoration: new BoxDecoration(
              gradient: const LinearGradient(
                colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
              ),
              border: Border.all(width: 5.0,color: Colors.red)
            )
          */
          child: new Image.network(
            'http://cdn.duitang.com/uploads/item/201409/08/20140908155026_RdUwH.thumb.700_0.jpeg',
            fit: BoxFit.contain,//保持原来的图片
            // color: Colors.greenAccent,
            // colorBlendMode: BlendMode.darken,
            repeat: ImageRepeat.repeatY,
          ),
          width: 00,
          height: 400,
          color: Colors.lightBlue,
          
          )
          */
        ),
      ),
    );
  }
}

• 网格组件

 body: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,// 网格的列数
              mainAxisSpacing: 10.0,// 行间距
              crossAxisSpacing: 10.0,//网格间间距
              childAspectRatio: 0.7 //宽高比
            ),
            children: [
             new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.fill),
             new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),
           
            ],
          ),

Simulator Screen Shot - iPhone XR - 2019-10-23 at 11.30.23.png