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

ListView横向列表

效果:

flutter 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(
                  width: 120,
                  color: Colors.lime,
                ),
                new Container(
                  width: 120,
                  color: Colors.pinkAccent,
                ),
                new Container(
                  width: 120,
                  color: Colors.purpleAccent,
                ),
                new Container(
                  width: 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(
          width: 120,
          color: Colors.lime,
        ),
        new Container(
          width: 120,
          color: Colors.pinkAccent,
        ),
        new Container(
          width: 120,
          color: Colors.purpleAccent,
        ),
        new Container(
          width: 120,
          color: Colors.deepPurple,
        ),
      ],
    );
  }
}
void main() {
  runApp(MyApp());
}

ListView不定长列表

效果:

flutter 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"),));
}

 

上一篇:什么是URI、URL、URN、URC和Data URI?


下一篇:URI、URL和URN的区别