flutter第一个GridView

在这里插入图片描述

主程序入口 main.dart

import 'package:flutter/material.dart';
import 'package:flutter_app/MyGlideApp.dart';

void main() => runApp(MyApp()); //主程序入口

class MyApp extends StatelessWidget {
  List<String> list = [];

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
//    return new MaterialApp(
//      title: 'title 并没有显示在屏幕上',
//      home: new Scaffold(
//        appBar: new AppBar(
//          title: new Text("这是一个标题"),
//        ),
//        body: new Center(
//          child: new RandomWords(),
//        ),
//      ),
//    );
    return new MaterialApp(
      title: '滑动列表',
      home: MyGlideApp(),
    );
//  }
  }
}

带状态的stateWidget:

import 'package:flutter/material.dart';
import 'package:flutter_app/MyAppState.dart';

//带状态的stateWidget
class MyGlideApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyAppState();
  }
}

具体实现:MyAppState.dart

import 'package:flutter/material.dart';
import 'package:flutter_app/MyGlideApp.dart';

class MyAppState extends State<MyGlideApp> {
  List<String> _list = [];

  @override
  void initState() {
    super.initState();
    getImages();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: new AppBar(title: Text("滑动列表")),
      body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, //一行Widget的数量
              mainAxisSpacing: 5, //垂直子view之间的间距
              crossAxisSpacing: 3, //水平子View之间的间距
              childAspectRatio: 1), //子Widget宽高比
          itemCount: _list.length,
          itemBuilder: (BuildContext context, int i) {
            if (i == _list.length - 1 && _list.length < 100) {
              getImages();
            }
            return Image.network(
              _list[i],
              width: 100,
              height: 100,
            );
          }),
    ));
  }

  void getImages() {
    _list.addAll([
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568184965969&di=e1e4ac97d781d169b23908334026e165&imgtype=0&src=http%3A%2F%2Fpic108.nipic.com%2Ffile%2F20160828%2F21343078_165728899714_2.jpg",
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568184965969&di=e1e4ac97d781d169b23908334026e165&imgtype=0&src=http%3A%2F%2Fpic108.nipic.com%2Ffile%2F20160828%2F21343078_165728899714_2.jpg",
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568184965969&di=e1e4ac97d781d169b23908334026e165&imgtype=0&src=http%3A%2F%2Fpic108.nipic.com%2Ffile%2F20160828%2F21343078_165728899714_2.jpg",
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568184965969&di=e1e4ac97d781d169b23908334026e165&imgtype=0&src=http%3A%2F%2Fpic108.nipic.com%2Ffile%2F20160828%2F21343078_165728899714_2.jpg",
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568184965969&di=e1e4ac97d781d169b23908334026e165&imgtype=0&src=http%3A%2F%2Fpic108.nipic.com%2Ffile%2F20160828%2F21343078_165728899714_2.jpg",
    ]);
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值