Flutter常用组件的讲解

TextWidget文本组件讲解

TextWidget的常用属性

• TextAlign：文本对齐属性（TextAlign.center，TextAlign.left
  ，TextAlign.right
  ，TextAlign.start
  ，TextAlign.end）
• maxLines：文本显示的最大行数
• overflow：控制文本的溢出效果

child: Text("测试文本，测试文本内容显示",
textAlign: TextAlign.left,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(
    fontSize: 25.0,
    color: Color.fromARGB(255, 255, 150, 150),
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.solid
  ),
),

Container容器组件

Alignment属性的使用

alignment: Alignment.center

设置宽高和颜色

width: 500.0,
height: 400.0,
color: Color.fromARGB(255, 255, 150, 40)

Padding内边距属性的使用

EdgeInsets.all() 统一设置
const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom)

margin外边距属性的使用

EdgeInsets.all() 统一设置
const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom)

decoration属性制作彩色背景颜色

• 设置容器的边框
• BoxDecoration Widget
• LinearGradient设置背景颜色渐变

decoration: new BoxDecoration(
  gradient: const LinearGradient(
    colors: [
      Colors.lightBlueAccent,
      Colors.greenAccent,
      Colors.purpleAccent
    ]
  )
),

ImageWidget图片组件讲解

1.Image Widget的几种加入形式

• Imgae.asset：加载资源图片，会使打包时过大
• Image.network：网络资源图片，经常换的活着动态图片
• Image.file：本地图片，比如相机照相后的图片预览
• Image.memory：加载到内存中的图片，Uint8List

2.Fit属性

fit: BoxFit.cover

3.图片的混合模式

color: Colors.pinkAccent,
colorBlendMode: BlendMode.darken

4.Repeat属性让图片重复

repeat: ImageRepeat.repeat

ListView Widget列表组件的使用

• ListView组件的语法
• ListTile的使用
• 做一个图片的列表

body: new ListView(
  children: [
    new ListTile(
      leading: new Icon(Icons.ac_unit),
      title: new Text("看一下效果"),
    ),
    new ListTile(
      leading: new Icon(Icons.access_alarms),
      title: new Text("看一下效果"),
    ),
    new ListTile(
      leading: new Icon(Icons.add_a_photo),
      title: new Text("看一下效果"),
    ),
    new Image.network(
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3007246663,2059636712&fm=26&gp=0.jpg"),
    new Image.network(
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3007246663,2059636712&fm=26&gp=0.jpg"),
    new Image.network(
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3007246663,2059636712&fm=26&gp=0.jpg"),
    new Image.network(
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3007246663,2059636712&fm=26&gp=0.jpg"),
  ],
)));

横向列表和自定义组件

1.横向列表的使用
2.scrollDirection属性

• Axis.horizontal：横向滚动或者叫水平方向滚动
• Axis.vertical：纵向滚动或者叫垂直方向滚动

body: Center(
  child: Container(
    height: 200.0,
    child: new ListView(
      scrollDirection: Axis.horizontal,
      children: [
        new Container(
          width: 200.0,
          color: Colors.lightBlueAccent,
        ),
        new Container(
          width: 200.0,
          color: Colors.yellowAccent,
        ),
        new Container(
          width: 200.0,
          color: Colors.redAccent,
        ),
        new Container(
          width: 200.0,
          color: Colors.orangeAccent,
        ),
        new Container(
          width: 200.0,
          color: Colors.greenAccent,
        )
      ],
    ),
  ),
)));

3.代码优化，自定义组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Flutter Demo",
        home: Scaffold(
            appBar: AppBar(
              title: Text("Flutter Text"),
            ),
            body: Center(
              child: Container(height: 200.0, child: MyListTest()),
            )));
  }
}

class MyListTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      scrollDirection: Axis.horizontal,
      children: [
        new Container(
          width: 200.0,
          color: Colors.lightBlueAccent,
        ),
        new Container(
          width: 200.0,
          color: Colors.yellowAccent,
        ),
        new Container(
          width: 200.0,
          color: Colors.redAccent,
        )
      ],
    );
  }
}

动态列表的使用

Dart中List类型的使用

• List类型介绍，可以简单理解为js中的数组
• 声明List有4种方式

传递和接受参数，实现动态列表的基础

• 如何传递参数
• 如果接受参数

动态列表的案例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final List<String> items;

  MyApp({Key key, @required this.items}):super(key: key);

  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Flutter Demo",
        home: Scaffold(
            appBar: AppBar(
              title: Text("Flutter Text"),
            ),
            body: new ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return new ListTile(
                  title: new Text('${items[index]}'),
                );
              },
            )));
  }
}