flutter ListView横向列表&不定长列表&网格

ListView横向列表

效果：

（可以左右滑动）

代码形式1：

main.dart

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'dasldjalsdjasldj',
      home: Scaffold(
        appBar: new AppBar(title: new Text('new texrdasdasd'),),
        body: Center(
          child: Container(
            height: 200.0,
            child: new ListView(
              scrollDirection: Axis.horizontal,
              children: [
                new Container(
                   120,
                  color: Colors.lime,
                ),
                new Container(
                   120,
                  color: Colors.pinkAccent,
                ),
                new Container(
                   120,
                  color: Colors.purpleAccent,
                ),
                new Container(
                   120,
                  color: Colors.deepPurple,
                ),                                                
              ],
            ),
          ),
        )
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

代码形式2：

main.dart

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'dasldjalsdjasldj',
      home: Scaffold(
        appBar: new AppBar(title: new Text('new texrdasdasd'),),
        body: Center(
          child: Container(
            height: 200.0,
            child: Mylist(),
          ),
        )
      ),
    );
  }
}


class Mylist extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: [
        new Container(
           120,
          color: Colors.lime,
        ),
        new Container(
           120,
          color: Colors.pinkAccent,
        ),
        new Container(
           120,
          color: Colors.purpleAccent,
        ),
        new Container(
           120,
          color: Colors.deepPurple,
        ),
      ],
    );
  }
}
void main() {
  runApp(MyApp());
}

ListView不定长列表

效果：

代码：

main.dart

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {

  final List<String> items;
  MyApp({required this.items});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'dasldjalsdjasldj',
      home: Scaffold(
        appBar: new AppBar(title: new Text('new texrdasdasd'),),
        body: new ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
          return new ListTile(
            title: new Text('${items[index]}'),
          );
        })
      ),
    );
  }
}
void main() {
  runApp(MyApp(items: new List<String>.generate(20, (index) => "物品 $index"),));
}

网格

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'dasldjalsdjasldj',
      home: Scaffold(
        appBar: new AppBar(title: new Text('new texrdasdasd'),),
        body: GridView.count(
          crossAxisCount: 3,
          children: [
            const Text('hello'),
            const Text('23'),
            const Text('2323'),
            const Text('323'),
            const Text('he2323llo'),
            const Text('h322ello'),
            const Text('he23llo'),
            const Text('he23llo'),
            const Text('2323'),
            const Text('LAST'),
          ],)
      ),
    );
  }
}
void main() {
  runApp(MyApp());
}