Flutter常用组件的讲解

189

TextWidget文本组件讲解

TextWidget的常用属性

1.TextAlign:文本对齐属性(TextAlign.center,TextAlign.left,TextAlign.right,TextAlign.start,TextAlign.end)
2.maxLines:文本显示的最大行数
3.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属性制作彩色背景颜色

1.设置容器的边框
2.BoxDecoration Widget
3.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列表组件的使用

1.ListView组件的语法
2.ListTile的使用
3.做一个图片的列表

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]}'),
                );
              },
            )));
  }
}