Flutter用ListData的里面的数据简单的生成列表菜单来检索内容
Flutter新手，从网上高手学到了不少的技术，因为搜索网络没有这样的高手来分享这个小功能，所以自己做了一份，也来分享一下小经验，算是回报各位码农高手新手：
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'countmodle.dart';
import 'package:provider/provider.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (BuildContext context) {
return CountModle();
}),
],
child: MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new MenuWidget(),
),
));
}
}
int groupValue = 0;
int i = 0;
int keyvalue = 0;
int keyvalue2 = 0;
List menuList = [
{
"title1": "黄帝",
"title2":
"黄帝，中国古代部落联盟首领，五帝之首。黄帝被尊祀为“人文初祖”。 在《山海经》里“黄帝”只是诸帝之一，直到春秋战国时期才被定于一尊。 据说他是少典与附宝之子，本姓公孙，后改姬姓 ，也有说巳姓。 名轩辕，一说名轩。 建都于有熊，亦称有熊氏。也有人称之为“帝鸿氏”。 史载黄帝因有土德之瑞，故号黄帝。黄帝在位期间，播百谷草木，大力发展生产，始制衣冠、建舟车、制音律、作《黄帝内经》等。 黄帝的出生地古代文献记载有河南新郑、山东寿丘 、甘肃天水三地；近代学术界推测黄帝的发源地有陕西黄陵说、辽河说等。",
"type": 0,
},
{
"title1": "神农",
"title2":
"炎帝，是中国上古时期姜姓部落的首领尊称，号神农氏，又号魁隗氏、连山氏、列山氏，别号朱襄。（尚有争议，也有说朱襄氏部落曾有三代首领尊号炎帝 ）。 传说姜姓部落的首领由于懂得用火而得到王位，所以称为炎帝。从神农起姜姓部落共有九代炎帝，神农生帝魁，魁生帝承，承生帝明，明生帝直，直生帝氂，氂生帝哀，哀生帝克，克生帝榆罔，传位五百三十年。 炎帝所处时代为新石器时代，炎帝故里目前有六地之争，分别是：陕西宝鸡、湖南会同县连山、湖南株洲炎陵县、湖北的随州、山西高平、河南柘城 。炎帝部落的活动范围在黄河中下游，在姜水（一说是今宝鸡市渭滨区的清姜河，一说是今宝鸡市岐山县的岐水。）一带时部落开始兴盛，最初定都在陈地，后来又将都城迁移到曲阜。 相传炎帝牛首人身，他亲尝百草，发展用草药治病；他发明刀耕火种创造了两种翻土农具，教民垦荒种植粮食作物；他还领导部落人民制造出了饮食用的陶器和炊具。 传说炎帝部落后来和黄帝部落结盟，共同击败了蚩尤。 华人自称炎黄子孙，将炎帝与黄帝共同尊奉为中华民族人文初祖，成为中华民族团结、奋斗的精神动力。 炎帝被道教尊为神农大帝，也称五榖神农大帝。",
"type": 1
},
{"title1": "雷公", "title2": "远古，黄帝内经里面的主人公", "type": 2},
{"title1": "歧伯", "title2": "远古，黄帝内经里面的主人公", "type": 3},
{"title1": "扁鹊", "title2": "春秋战国，名医", "type": 4},
{"title1": "华佗", "title2": "三国时期，不幸遇上曹操这个蠢货", "type": 5},
{"title1": "张仲景", "title2": "东汉，医祖。高人", "type": 6},
{"title1": "孙思邈", "title2": "唐朝，寿长140岁，高人中的高人", "type": 7},
{"title1": "皇浦谧", "title2": "说明", "type": 8},
{"title1": "公孙和", "title2": "说明", "type": 9},
{"title1": "菜单一", "title2": "说明", "type": 10},
{"title1": "菜单四", "title2": "说明", "type": 11},
{"title1": "菜单五", "title2": "说明", "type": 12},
{"title1": "菜单六", "title2": "说明", "type": 13},
{"title1": "菜单七", "title2": "说明", "type": 14},
];
class MenuWidget extends StatefulWidget {
@override
_MenuWidgetState createState() => _MenuWidgetState();
}
class _MenuWidgetState extends State<MenuWidget>
with SingleTickerProviderStateMixin {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Stack(children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Container(
width: 90,
color: Colors.blue[100],
padding: EdgeInsets.only(left: 5, top: 0, right: 5, bottom: 0),
child: Container(
child: getDataListY(),
),
),
),
Align(
alignment: Alignment.topRight,
child: Container(
height: MediaQuery.of(context).size.height,
margin: EdgeInsets.only(left: 92, top: 0, right: 2, bottom: 0),
padding: EdgeInsets.only(left: 0, top: 0, right: 0, bottom: 0),
child: getDataListZ(
keyvalue2: keyvalue,
),
// ],
// ),
),
),
]);
}
}
class getDataListY extends StatefulWidget {
getDataListY({Key? key}) : super(key: key);
@override
_getDataListYState createState() => _getDataListYState();
}
class _getDataListYState extends State<getDataListY> {
List<Widget> _getDataListY() {
var datalist = menuList.map((value) {
return Stack(
children: [
//isThreeLine: true,
TextButton(
onPressed: () {
updateGroupValue(value['type']);
context.read<CountModle>().add();
},
child: Text(value['title1']),
),
],
);
});
return datalist.toList();
}
@override
Widget build(BuildContext context) {
return GridView.count(
mainAxisSpacing: 0.0,
crossAxisSpacing: 0.0,
crossAxisCount: 1,
children: _getDataListY(),
);
}
void updateGroupValue(int v) {
setState(() {
groupValue = v;
});
}
}
class getDataListZ extends StatefulWidget {
var keyvalue2;
getDataListZ({Key? key, required this.keyvalue2});
@override
_getDataListZState createState() => _getDataListZState();
}
class _getDataListZState extends State<getDataListZ> {
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
Text(menuList[groupValue]['title2'] +
"Count ${context.watch<CountModle>().count}"),
Visibility(
child: Text("Count ${context.watch<CountModle>().count}"),
visible: true,
),
],
));
}
}
//================================================
以下是Countmodel.dart文件的内容，拷贝存储即可：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'main.dart';
class CountModle with ChangeNotifier {
//int keyvalue = updatakey(keyvalue2);
int _count = 0;
// int _keyvalue = 0;
int get count => _count;
void add() {
_count++;
notifyListeners();
}
}
//==========================
以下 是PuBSPEC.YAML里面添加provider的内容：
dependencies:
flutter:
sdk: flutter
provider: ^6.0.1
