flutterDemo1-girdView和listView使用

未命名.gif

项目结构如下：

屏幕快照 2019-04-24 下午2.28.14.png

main.dart文件 其中home()未自定义的类

import 'package:flutter/material.dart';
import 'pages/home.dart';

void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Container(
            child: home(),
          ),
        ),
      ),
    );
  }
}

home.dart文件：使用girdView编写

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:gridviewdemo/pages/listview.dart';

final List<String> titles = [];
final List<Color> backColors = [];

class home extends StatefulWidget {
  @override
  _homeState createState() => _homeState();
}

class _homeState extends State<home> {
  @override
  void initState() {
    super.initState();
    for(int i = 0; i<100;i++){
      titles.add(i.toString());
      //随机颜色
      backColors.add(Color.fromRGBO(Random.secure().nextInt(255), Random.secure().nextInt(255), Random.secure().nextInt(255), 1.0));
    }    
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('girdView', style: TextStyle(color: Colors.white)),
        backgroundColor: Color.fromRGBO(73, 73, 73, 1.0),
        centerTitle: true, //强制文字居中
      ),
      body: GridView.builder(
        itemCount: titles.length,    
        //横轴item数量 间距
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisSpacing: 20.0,
          crossAxisSpacing: 10.0,          
        ),
        itemBuilder: (BuildContext context,int index){
          return _itemBuilder(context,index);
        }
      )
    );
  }

  Container _itemBuilder(BuildContext context, int index) {
    return new Container(
      //设置item圆角
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0), color: backColors[index]),
      child: InkWell(
        onTap: () {
          clickItemBtn(context,index);
        },
        child: Center(
          child: Text(
            titles[index],
            style: TextStyle(color: Colors.white, fontSize: 18.0),
          ),
        ),
      ),
    );
  }
}

//点击item
void clickItemBtn(BuildContext context,int index) {
        Navigator.push(context,
        MaterialPageRoute(builder: (context)=>
        listview(navTitle: titles[index])
      )
    );       
}

listView文件：

import 'package:flutter/material.dart';
import 'package:gridviewdemo/config/constConfig.dart';

BuildContext _context;

class listview extends StatelessWidget {
  final String navTitle;
  listview({Key key, @required this.navTitle}) : super(key: key);

  @override
  Widget build(BuildContext context) => _build(context, navTitle);
}

@override
Widget _build(BuildContext context, String navTitle) {
  _context = context;
  return Scaffold(
    appBar: AppBar(
      title: Text(navTitle),
      centerTitle: true, //强制文字居中
    ),
    body: Container(
      child: ListView(children: _children()),
    ),
  );
}

List<Widget> _children() {
  List<Widget> Widgets = [];
  for (int i = 0; i < 100; i++) {
    Widgets.add(_getItem(i, i.toString()));
  }
  return Widgets;
}

Widget _getItem(int index, String text) {
  if (index.isOdd) return new Divider(); //添加分割线
  return new Container(
    height: 60,
    child: new Row(
      children: <Widget>[
        _leftText(index,text),
      ],
    ),
  );
}

Widget _leftText(int index, String text) {
  return Container(
    margin: EdgeInsets.only(left: 20),
    width: 120,
    child: Text('这是第${text}个item', textAlign: TextAlign.center),
    alignment: Alignment.center, //居中
  );
}

constConfig文件存放全局方法：

import 'package:flutter/material.dart';

class constConfig {
/** 获取屏幕宽度 */
  static double getScreenWidth(BuildContext context) {
    return MediaQuery.of(context).size.width;
  }

  /** 获取屏幕高度 */
  static double getScreenHeight(BuildContext context) {
    return MediaQuery.of(context).size.height;
  }

  /** 获取系统状态栏高度 */
  static double getSysStatsHeight(BuildContext context) {
    return MediaQuery.of(context).padding.top;
  }
}

github地址
https://github.com/qw9685/flutter