小言_互联网的博客

Flutter入门和实战一

2020-04-01 15:16 461人阅读  评论(0)

娱乐

今天听网易云音乐的时候无意中看到一组图分享给大家

 

介绍

Flutter是Google一个新的用于构建跨平台的手机App的SDK。写一份代码，在Android 和iOS平台上都可以运行，最近看到很多大公司都在用Flutter，比如阿里巴巴的咸鱼、淘宝、京东，说明什么？说明大家都重视Flutter跨平台，学习此篇文章你可以学到Flutter的搭建、一些基本控件的使用、以及动态添加数据等，由于有一些人是初学者我尽量每个都讲详细一点。

编码

记得当初刚入行程序员的时候，第一句代码就是Hello world，那么我们第一句代码就以Hello world开始

  • 搭建环境
  • 了解工具
  • 编写Hello world
  • 了解各个基层控件

搭建环境

这个已经千篇一律的,我就不讲解了请移步官方搭建教程

分别有WINDOWS   MACOS    LINUX

了解工具

我用的是IDE工具，今天就以intellij工具为例，详细使用请移步我之前写的文章AndroidStudio使用第一步创建程序：

编写Hello world

准备好以后我们进行第一句代码Hello world编写并且运行

import 'package:flutter/material.dart';
import 'package:flutter1/TextGv.dart';
import 'package:flutter1/TextLayout.dart';

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

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

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
          body: Center(child: Text('Hello world  帅气的阿力')),
        )

        );
  }
}

了解各个基层控件

  • ListView
  • GridView
  • RowWidget
  • StackWiget
  • ColummnWidget

ListView

常见的listview的一些效果以及实现方法

效果一

class TitleImgList extends StatelessWidget {
  @override
  
import 'package:flutter/material.dart';
import 'package:flutter1/TextGv.dart';
import 'package:flutter1/TextLayout.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Hello 阿力',
        home:Scaffold(
        body:Center(
        child:TitleImgList()
        )
    ),
    );
  }
}

Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      scrollDirection: Axis.vertical,
      children: <Widget>[
        new ListTile(
          leading: new Icon(Icons.perm_camera_mic),
          title: new Text('perm_camera_mic'),
        ),
        new ListTile(
          leading: new Icon(Icons.pets),
          title: new Text('perm_camera_mic'),
        ),
        new ListTile(
          leading: new Icon(Icons.lock_open),
          title: new Text('perm_camera_mic'),
        ),
        new ListTile(
          leading: new Icon(Icons.perm_identity),
          title: new Text('perm_camera_mic'),
        ),
        new ListTile(
          leading: new Icon(Icons.perm_data_setting),
          title: new Text('perm_camera_mic'),
        ),
        new ListTile(
          leading: new Icon(Icons.beach_access),
          title: new Text('perm_camera_mic'),
        )
      ],
    );
  }
}

效果二


  import 'package:flutter/material.dart';
import 'package:flutter1/TextGv.dart';
import 'package:flutter1/TextLayout.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Hello 阿力',
        home:Scaffold(
        body:Center(
        child:ImgList()
        )
    ),
    );
  }
}

class ImgList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      scrollDirection: Axis.vertical,
      children: <Widget>[
        new Image.network(
            'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
        new Image.network(
            'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
        new Image.network(
            'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
        new Image.network(
            'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
        new Image.network(
            'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
        new Image.network(
            'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
        new Image.network(
            'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
        new Image.network(
            'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
        new Image.network(
            'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg')
      ],
    );
  }
}

效果三

import 'package:flutter/material.dart';
import 'package:flutter1/TextGv.dart';
import 'package:flutter1/TextLayout.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Hello 阿力',
        home:Scaffold(
        body:Center(
        child:crossImgList()
        )
    ),
    );
  }
}


class crossImgList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        new Container(
          width: 180.0,
          color: Colors.indigo,
        ),
        new Container(
          width: 180.0,
          color: Colors.amber,
        ),
        new Container(
          width: 180.0,
          color: Colors.pinkAccent,
        ),
        new Container(
          width: 180.0,
          color: Colors.lightGreenAccent,
        ),
        new Container(
          width: 180.0,
          color: Colors.cyan,
        ),
        new Container(
          width: 180.0,
          color: Colors.red,
        )
      ],
    );
  }
}

GridView

常见的GridView的一些效果以及实现方法

效果一

import 'package:flutter/material.dart';
import 'package:flutter1/TextGv.dart';
import 'package:flutter1/TextLayout.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Hello 阿力',
        home:Scaffold(
        body:Center(
        child:GvText()
        )
    ),
    );
  }
}

class GvText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisSpacing: 5.0,
          crossAxisSpacing: 5.0,
          childAspectRatio: 0.7),
      children: <Widget>[
        new Text('阿力1号'),
        new Text('阿力2号'),
        new Text('阿力3号'),
        new Text('阿力4号'),
        new Text('阿力5号'),
        new Text('阿力6号')
      ],
    );
  }
}

效果二

import 'package:flutter/material.dart';
import 'package:flutter1/TextGv.dart';
import 'package:flutter1/TextLayout.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Hello 阿力',
        home:Scaffold(
        body:Center(
        child:GvImg()
        )
    ),
    );
  }
}


//演示Gv图片
class GvImg extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisSpacing: 2.0,
          crossAxisSpacing: 2.0,
          childAspectRatio: 0.7),
      children: <Widget>[
        new Image.network(
            'http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',
            fit: BoxFit.cover),
        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),
      ],
    );
  }

以上就是实现Flutter比较基础的二个控件，下一章在给大家介绍以下几个控件,并且开源几个我自己服务器的api提供给大家练习，建议大家按照上面写一遍实现一下效果，源码下一期给出来并且带大家了解Dart语言

  • RowWidget
  • StackWiget
  • ColummnWidget

 

 

 

 


转载：https://blog.csdn.net/a214024475/article/details/87865414
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场