方法一
listview 嵌套listview，注意第二个listview的shrinkWrap属性和physics属性
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:fluttertoast/fluttertoast.dart';
class HomeFragmentPage extends StatefulWidget {
@override
State createState() {
return _HomeFragmentPageState();
}
}
class _HomeFragmentPageState extends State {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: null,
body: new ListView(
children: [
new Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
),
new ListView.builder(
shrinkWrap: true, //解决无线高度问题
physics: new NeverScrollableScrollPhysics(), //禁用滑动事件
itemCount: 5,
scrollDirection: Axis.vertical,
padding: EdgeInsets.fromLTRB(0, 0, 0, 20),
itemBuilder: (BuildContext context, int index) {
return new InkWell(
child: new Container(
child: new Card(
elevation: 15.0,
shape: const RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(14.0))),
child: new Container(
padding: EdgeInsets.all(8.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Text("小麦"),
new Text("安徽省合肥市"),
new Text("2170"),
new Text("0.9%")
],
),
),
),
),
onTap: () => _listItemOnTap(index),
);
})
],
));
}
_listItemOnTap(int index) {
Fluttertoast.showToast(msg: "当前点击的是list里的第$index");
}
}
方法二
CustomScrollView 配合 SliverList使用
class HomeFragmentPage2 extends StatefulWidget {
@override
State createState() {
return _HomeFragmentPageState2();
}
}
class _HomeFragmentPageState2 extends State {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: CustomScrollView(
slivers: [
new SliverList(
delegate:
new SliverChildBuilderDelegate((BuildContext context, int index) {
return new Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: new Column(
children: [
// banner
new Container(
height: 200,
child: new Swiper(
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return new Image.network(
"https://upload.jianshu.io/users/upload_avatars/3884536/d847a50f1da0.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240",
fit: BoxFit.cover,
);
},
pagination: new SwiperPagination(),
// control: new SwiperControl(),
autoplay: true,
duration: 500,
onTap: (int index) {
Fluttertoast.showToast(msg: "点击了第$index个图片");
},
),
),
// 功能栏
new Container(
height: 100,
color: Colors.greenAccent,
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: new GestureDetector(
child: new Column(
children: [
new Icon(
Icons.add_shopping_cart,
size: 45,
),
new Text(
"交易查询",
style: new TextStyle(
fontSize: 12, color: Colors.black38),
)
],
mainAxisAlignment: MainAxisAlignment.center,
),
onTap: () {
Fluttertoast.showToast(
msg: "点击了交易查询",
);
},
),
flex: 1,
),
Expanded(
child: new GestureDetector(
child: new Column(
children: [
new Icon(
Icons.add_shopping_cart,
size: 45,
),
new Text(
"我的仓单",
style: new TextStyle(
fontSize: 12, color: Colors.black38),
)
],
mainAxisAlignment: MainAxisAlignment.center,
),
onTap: () {
Fluttertoast.showToast(
msg: "点击了我的仓单",
);
},
),
flex: 1,
),
Expanded(
child: new GestureDetector(
child: new Column(
children: [
new Icon(
Icons.add_shopping_cart,
size: 45,
),
new Text(
"资金管理",
style: new TextStyle(
fontSize: 12, color: Colors.black38),
)
],
mainAxisAlignment: MainAxisAlignment.center,
),
onTap: () {
Fluttertoast.showToast(
msg: "点击了资金管理",
);
},
),
flex: 1,
),
Expanded(
child: new GestureDetector(
child: new Column(
children: [
new Icon(
Icons.add_shopping_cart,
size: 45,
),
new Text(
"用户中心",
style: new TextStyle(
fontSize: 12, color: Colors.black38),
)
],
mainAxisAlignment: MainAxisAlignment.center,
),
onTap: () {
Fluttertoast.showToast(
msg: "点击了用户中心",
);
},
),
flex: 1,
),
],
),
),
// 交易信息
new Container(
height: 130,
child: new Center(
child: new ListView.builder(
padding: EdgeInsets.all(10.0),
itemCount: 4,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return new InkWell(
child: new Container(
child: new Card(
elevation: 15.0,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(14.0))),
child: new Container(
padding: EdgeInsets.all(8.0),
child: new Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
new Text("小麦"),
new Text("安徽省合肥市"),
new Text("2170"),
new Text("0.9%")
],
),
),
),
),
onTap: () => _listItemOnTap(index),
);
}),
),
),
new Container(
width: double.infinity,
height: 10,
color: Colors.black12,
),
new Container(
padding: EdgeInsets.fromLTRB(15, 10, 0, 10),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Container(
width: 3,
height: 16,
// color: Colors.red,
decoration: new BoxDecoration(
border:
new Border.all(color: Colors.red, width: 0.5),
color: Colors.red,
borderRadius: new BorderRadius.circular((20.0))),
),
new Container(
padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
child: new Text(
"行业快讯",
style: new TextStyle(
fontSize: 17.0, color: new Color(0xFF333333)),
textAlign: TextAlign.center,
),
)
],
),
),
],
),
);
}, childCount: 1),
),
new SliverList(
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
return new InkWell(
child: new Container(
child: new Card(
elevation: 15.0,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(14.0))),
child: new Container(
padding: EdgeInsets.all(8.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Text("小麦"),
new Text("安徽省合肥市"),
new Text("2170"),
new Text("0.9%")
],
),
),
),
),
onTap: () => _listItemOnTap(index),
);
}, childCount: 5))
],
));
}
_listItemOnTap(int index) {
Fluttertoast.showToast(msg: "当前点击的是list里的第$index");
}
}