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不定长列表
效果:
代码:
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"),)); }