左侧滑动选择按钮 右侧展示数据 这个效果由于手机屏幕变大好像没什么app用了
import 'package:flutter/material.dart';
import 'dart:math';
class LeftListViewPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return LeftListViewPageState();
}
}
class LeftListViewPageState extends State<LeftListViewPage> {
List<String> leftList = ['这是1',
'这是2', '这是3',
'这是4','这是5','这是6','这是7',
'这是8','这是9','这是10','这是11','这是12', '这是13',
'这是14','这是15','这是16','这是17','这是18','这是19','这是20'];
int _selectCount = 0;
void Function(int) onMenuChecked;
@override
void initState() {
// TODO: implement initState
super.initState();
onMenuChecked = (int i) {
if(_selectCount != i){
_selectCount = i;
}
setState(() {
});
};
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('左侧选择列表'),
),
body: Row(
children: <Widget>[
leftListv(3,leftList,onMenuChecked),
Expanded(
flex: 7,
child: RightListView()
)
],
)
);
}
Widget leftListv (int i,List<String> myContent, onMenuCheckListener){
return Expanded(
child: ListView.builder(
itemCount: leftList.length,
itemBuilder: (context,index){
return InkWell(
onTap: (){
onMenuCheckListener(index);
},
child: Container(
margin: EdgeInsets.all(3),
padding: EdgeInsets.only(top: 10,bottom: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
border: Border.all(color:_selectCount == index ? Colors.black87 : Colors.white,
width: 0.5),
),
alignment: Alignment.center,
child: Text(leftList[index],
style: TextStyle(
fontSize: 16
),
),
),
);
}
),
flex: i,
);
}
}
class RightListView extends StatelessWidget {
List rightTitles = ['测试数据就是这样怎么了','这个短','这个长是不是是',
'我就是随便写写','是短','这个长不长也','就那样也不长',
'谁说的这个是最后的我就写长点儿你能拿我怎么办打不到我吧我就是这么强大'];
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
margin: EdgeInsets.only(left: 10.0,top: 10.0),
alignment: Alignment.topLeft,
child: Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: rightTitles.map((childNode){
return GestureDetector(
child: new ClipRRect(
borderRadius: BorderRadius.circular(3.0),
child: Container(
padding: EdgeInsets.all(3.0),
color: getRandomColor(),
child: Text(
childNode,
style: TextStyle(
fontSize:14,
color: Colors.white,
shadows: [
BoxShadow(
color: Colors.grey,
offset: Offset(0.2, 0.2)
)],
),
),
),
)
);
}).toList(),
),
);
}
}
getRandomColor(){
return Color.fromARGB(255, Random.secure().nextInt(255), Random.secure().nextInt(255), Random.secure().nextInt(255));
}