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