Flutter学习笔记二：基础组件的使用

最新推荐文章于 2020-07-19 14:56:20 发布

月半叫做胖

最新推荐文章于 2020-07-19 14:56:20 发布

阅读量185

点赞数

分类专栏： Flutter 日常开发

本文链接：https://blog.csdn.net/qq_24724109/article/details/104128412

版权

日常开发同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

Flutter

10 篇文章 0 订阅

订阅专栏

1. flutter 在ubuntu下的环境配置

具体内容审核不通过，可以看github
主要踩坑包括

android studio的安装
java 版本和sdkmanager不兼容，降java版本
sdk的安装(工具的使用)

2. 基础组件的使用

0. 心得

flutter并不像前端一样有分离的js,css,javascript,都是通过组件的形式进行安排的，布局是一个组件对象内的属性等等，因此组件是flutter的基础，一切控件的位置什么的都是通过组件配置的来实现的https://github.com/LaoChen1994/LearnFlutter

1. Text组件

text是用于添加文字元素的，并给文字设置样式等。

代码示例

import "package:flutter/material.dart";

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'First App',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('第一个App'),
        ),
        body: new Center(
          child: new Text(
            '你好阿,用于测试长文本，你好阿,用于测试长文本你好阿,用于测试长文本你好阿,用于测试长文本你好阿,用于测试长文本你好阿,用于测试长文本你好阿,用于测试长文本你好阿,用于测试长文本',
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
            style: TextStyle(
              fontSize: 20,
              color: Color.fromARGB(255, 255, 133, 60),
              decoration: TextDecoration.lineThrough,
              decorationStyle: TextDecorationStyle.wavy
            ),
          ),
        ),
      ),
    );
  }
}

结构说明：

appBar: 顶部的导航兰
body: 是下面的内容区
center代表垂直意义上的居中组件，其中的child代表center组件的族要内容
这里的Text是一个一个组件
- textAign: 用于设置文字位置
- overflow: 用于设置文字溢出maxLines后的表现状态
- style用于处理字体的具体样式

更多的API设定可以查看官方手册：给文本添加样式

2. Container组件

该组件可以是一个容器，可以设置宽高，背景底色，margin, padding等，内部还可以作各种布局，类似于前端里面的拥有flex的div的感觉

代码示例

import "package:flutter/material.dart";

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'First App',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('第一个App'),
        ),
        // 使用Container的例子
        body: Center(
          child: Container(
            child: new Text(
              'Hello',
              style: TextStyle(fontSize: 30),
            ),
            alignment: Alignment.topLeft,
            width: 1000,
            height: 200,
            // color: Colors.lightBlue,
            padding: const EdgeInsets.all(10),
            margin: EdgeInsets.all(10),
            decoration: new BoxDecoration(
              // 如果用渐变色的话和color这个背景色的属性不能重叠使用
              gradient: const LinearGradient(
                colors: [Colors.lightBlue, Colors.orangeAccent]
              ),
              border: Border.all(width: 2, color: Colors.black),
              transform: Matrix4.rotationZ(1/12),
            ),
          ),
        ),
      ),
    );
  }
}

结构说明

child代表里面的主要内容
width，height等用来设定该元素中的样式属性
transform，类似于css的transform有一些旋转，放大缩小的操作
margin和padding后的参数不跟const 也是可以生效的

具体可以参考Container属性介绍

3. Image组件

代码示例

import 'dart:io';

import "package:flutter/material.dart";

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'First App',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('第一个App'),
        ),
        // 使用image asset的例子
        body: Center(
          child: Container(
            child: new Column(children: [
              new Text(
                'Hello',
                style: TextStyle(fontSize: 30),
              ),
              new Image.asset(
                'assets/images/icon.jpg',
                width: 500,
                height: 100,
                fit: BoxFit.contain,
                alignment: Alignment.bottomCenter,
                // 给图片加滤镜
                color: Colors.greenAccent,
                colorBlendMode: BlendMode.softLight,
                repeat: ImageRepeat.repeat
              )
            ]),
            alignment: Alignment.topLeft,
            width: 1000,
            height: 500,
            // color: Colors.lightBlue,
            padding: const EdgeInsets.all(10),
            margin: EdgeInsets.all(10),
            decoration: new BoxDecoration(
                gradient: const LinearGradient(
                    colors: [Colors.lightBlue, Colors.orangeAccent]),
                border: Border.all(width: 2, color: Colors.black)),
            transform: Matrix4.rotationZ(1 / 12),
          ),
        ),
      ),
    );
  }
}

结构说明

为一个container中添加多个元素可以通过Row或者Column组件，这些组件的child组件接受一个widget的数组，可以渲染多个组件
Image组件的使用

对象方法	作用	使用方法
Image.network	插入网络图片	直接以字符串的形式输入网络图片地址即可，之后在配置图片的长宽，等等配置参数即可
Image.assets	插入资源图片	1. 在目录下创建一个assets文件，下面对应文件夹防止 2. 配置pubspec.yaml文件，添加要加载的资源例如添加: assets: - assets/images/icon.jpg 3. 使用Image.asset(‘静态资源路径’)
Image.file	使用设备中的图片	使用Image.File(File(‘设备资源的路径地址’))
Image.memory	加载Uint8List的图片	参数为一个base64的字符串

4. ListView 列表组件

1. 基础列表

代码实现

import "package:flutter/material.dart";

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: '使用ListView',
        home: Scaffold(
          appBar: new AppBar(title: new Text('使用 List View')),
          body: Container(alignment: Alignment.center, child: new MyList()),
        ));
  }
}

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new ListView(
      scrollDirection: Axis.vertical,
      children: <Widget>[
        new ListTile(
          leading: new Text(
            "赞",
            style:
                TextStyle(color: Colors.redAccent, fontWeight: FontWeight.w800),
          ),
          title: new Text('add_box'),
        ),
        new ListTile(
          leading: new Icon(Icons.add_call),
          title: new Text('add Call'),
        ),
        new Container(
          child: new Image.asset('assets/images/icon.jpg'),
          decoration: new BoxDecoration(
              border: Border.all(color: Colors.greenAccent, width: 3)),
          margin: EdgeInsets.all(10),
          padding: EdgeInsets.all(20),
        ),
        new Image.asset('assets/images/icon.jpg'),
      ],
    );
  }
}

结构说明

listView外部不能嵌套Row组件，否则会报错
ListView是一个大的容器，里面的ListTile相当于每条列表信息，通过配置leading是设置最左边的表示，title代表的是他的标题
listView中的Children可以包含各种组件都是OK的
组件的封装就相当于重新创建一个class然后通过 new 调用这个组件即可

2. 动态ListView

代码实现

import "package:flutter/material.dart";

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: '使用ListView',
        home: Scaffold(
            appBar: new AppBar(title: new Text('使用 List View')),
            body: new ListView.builder(
              itemCount:item.length,
              itemBuilder: (context, index) {
                return new ListTile(
                  title: new Text('${item[index]}'),
                );
              },
            )));
  }
}

结构说明

List定义之后，通过generate 类似于JS中的map语法产生对应的字符串
class传参，类中获取参数的步骤
- final List item 声明参数的类型和参数名
- 利用MyApp({Key key, @required this.item}): super(key: key), 声明，从父类继承的key和外部获取的元素需要通过@required进行获取
- 之后在类内调用获取的参数直接用item调用就好，不需要再通过this关键字进行调用
ListView根据参数动态生成列表的方法:
- 设定itemCount的数量， listView动态生成列表的原理，根据itemCount进行循环生成
- 通过itemBuilder进行动态生成，其中的index是循环的索引值，通过item[index]获得循环到的元素，之后通过获得的该元素，来组织得到每个单独的模块，来动态生成
- 返回一个ListTile组件放到ListView中

5. GridView网格列表

GridView 和 ListView的区别: listView是一个列表(左右上下的滑动列表)，类似于li，Grid是一个规定行列的表格，类似于table

代码实现

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Grid View',
      home: Scaffold(
          appBar: new AppBar(title: new Text('Grid View')),
          body: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                // 纵向之间的间隔
                mainAxisSpacing: 10.0,
                // 横向之间的间隔
                crossAxisSpacing: 10.0,
                // 长宽比
                childAspectRatio: 0.5),
            children: <Widget>[
              Image.network(
                  'http://img5.mtime.cn/mt/2019/12/06/151723.54470898_140X210X4.jpg'),
              Image.network(
                  'http://img5.mtime.cn/mt/2019/12/27/102155.97632815_140X210X4.jpg'),
              Image.network(
                  'http://img5.mtime.cn/mt/2019/12/17/105242.88827408_140X210X4.jpg'),
              Image.network(
                  'http://img5.mtime.cn/mt/2019/12/27/101619.41873766_140X210X4.jpg'),
              Image.network(
                  'http://img5.mtime.cn/mt/2019/12/16/102337.73663733_140X210X4.jpg'),
              Image.network(
                  'http://img5.mtime.cn/mt/2020/01/16/151210.15087026_140X210X4.jpg'),
              Image.network(
                  'http://img5.mtime.cn/mt/2019/12/27/101619.41873766_140X210X4.jpg'),
              Image.network(
                  'http://img5.mtime.cn/mt/2019/12/16/102337.73663733_140X210X4.jpg'),
              Image.network(
                  'http://img5.mtime.cn/mt/2020/01/16/151210.15087026_140X210X4.jpg'),
            ],
          )),
    );
  }
}

结构说明

GridView的效果是一个相册的效果就是手机点开相册，一块块豆腐干排列的效果
常用参数说明gridDelegate
- crossAxisCount: 横向的最大排列元素的个数
- crossAxisSpacing: 横向元素时间的间隔
- crossAxisSpacing: 纵向元素之间的间隔
- childAspectRatio: 长宽比(横纵比)，这里是横的长度比纵宽度的
- children: 是一个Widget[]

月半叫做胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flutter学习笔记二：基础组件的使用

1. flutter 在ubuntu下的环境配置具体内容审核不通过，可以看github主要踩坑包括android studio的安装java 版本和sdkmanager不兼容，降java版本sdk的安装(工具的使用)2. 基础组件的使用0. 心得flutter并不像前端一样有分离的js,css,javascript,都是通过组件的形式进行安排的，布局是一个组件对象内的属性等等，...
复制链接

扫一扫