在这里插入图片描述

主程序入口 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",
    ]);
  }
}

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐