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