Flutter仿美團(tuán)點(diǎn)餐的UI效果

前兩天公司項(xiàng)目緊，要我做一個(gè)左邊列表選擇后缰贝，展示右邊的標(biāo)簽馍悟，然后右邊的標(biāo)簽可以多選，捋了下邏輯剩晴，覺得很簡(jiǎn)單锣咒，于是手?jǐn)]了代碼，代碼如下

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

class TestMenuPage extends StatefulWidget {

? @override

? _TestMenuPageState createState() => _TestMenuPageState();

}

class _TestMenuPageState extends State<TestMenuPage> {

? List<LeftData> leftList = [];

? int _leftIndex = 0;

? Map<int, List<int>> totalItem = {};

? double height;

? @override

? initState() {

? ? super.initState();

? ? leftList = List.generate(20, (index) => LeftData('$index組', index + 1)).toList();

? }

? @override

? Widget build(BuildContext context) {

? ? int length = 0;

? ? totalItem.forEach((key, value) {

? ? ? length += value.length;

? ? });

? ? height = MediaQuery.of(context).size.height;

? ? return Scaffold(

? ? ? appBar: AppBar(

? ? ? ? title: Text('測(cè)試菜單'),

? ? ? ? actions: [

? ? ? ? ? Container(

? ? ? ? ? ? width: 80,

? ? ? ? ? ? height: 50,

? ? ? ? ? ? child: Center(

? ? ? ? ? ? ? child: GestureDetector(

? ? ? ? ? ? ? ? onTap: () {

? ? ? ? ? ? ? ? ? print('所有選中的項(xiàng)目: ${totalItem.toString()}');

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? child: Text(

? ? ? ? ? ? ? ? ? '完成',

? ? ? ? ? ? ? ? ? style: TextStyle(

? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? ? ? color: Colors.white,

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ),

? ? ? ? ? ? ),

? ? ? ? ? )

? ? ? ? ],

? ? ? ),

? ? ? body: Column(

? ? ? ? // mainAxisSize: MainAxisSize.min,

? ? ? ? children: [

? ? ? ? ? if (length != 0)

? ? ? ? ? ? Column(

? ? ? ? ? ? ? mainAxisSize: MainAxisSize.min,

? ? ? ? ? ? ? children: [

? ? ? ? ? ? ? ? Container(

? ? ? ? ? ? ? ? ? height: 36,

? ? ? ? ? ? ? ? ? width: double.infinity,

? ? ? ? ? ? ? ? ? padding: EdgeInsets.symmetric(horizontal: 16),

? ? ? ? ? ? ? ? ? alignment: Alignment.centerLeft,

? ? ? ? ? ? ? ? ? child: Text.rich(

? ? ? ? ? ? ? ? ? ? TextSpan(

? ? ? ? ? ? ? ? ? ? ? children: [

? ? ? ? ? ? ? ? ? ? ? ? TextSpan(

? ? ? ? ? ? ? ? ? ? ? ? ? text: '已選擇',

? ? ? ? ? ? ? ? ? ? ? ? ? style: TextStyle(

? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0xff282828,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? WidgetSpan(

? ? ? ? ? ? ? ? ? ? ? ? ? child: Container(

? ? ? ? ? ? ? ? ? ? ? ? ? ? width: 8,

? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? TextSpan(

? ? ? ? ? ? ? ? ? ? ? ? ? text: '擅長(zhǎng)治療疾病最多選擇20個(gè)',

? ? ? ? ? ? ? ? ? ? ? ? ? style: TextStyle(

? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 14,

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0xff989898,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? )

? ? ? ? ? ? ? ? ? ? ? ],

? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? Container(

? ? ? ? ? ? ? ? ? width: double.infinity,

? ? ? ? ? ? ? ? ? padding: EdgeInsets.only(

? ? ? ? ? ? ? ? ? ? left: 16,

? ? ? ? ? ? ? ? ? ? right: 16,

? ? ? ? ? ? ? ? ? ? top: 16,

? ? ? ? ? ? ? ? ? ? bottom: 16,

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? // height: 173,

? ? ? ? ? ? ? ? ? constraints: BoxConstraints(

? ? ? ? ? ? ? ? ? ? // minHeight: 50,

? ? ? ? ? ? ? ? ? ? maxHeight: 173,

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? child: Scrollbar(

? ? ? ? ? ? ? ? ? ? thickness: 2,

? ? ? ? ? ? ? ? ? ? child: SingleChildScrollView(

? ? ? ? ? ? ? ? ? ? ? physics: BouncingScrollPhysics(),

? ? ? ? ? ? ? ? ? ? ? child: Wrap(

? ? ? ? ? ? ? ? ? ? ? ? runSpacing: 13,

? ? ? ? ? ? ? ? ? ? ? ? spacing: 13,

? ? ? ? ? ? ? ? ? ? ? ? children: _grow(),

? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ],

? ? ? ? ? ? ),

? ? ? ? ? Expanded(

? ? ? ? ? ? flex: 2,

? ? ? ? ? ? child: Container(

? ? ? ? ? ? ? height: double.infinity,

? ? ? ? ? ? ? decoration: BoxDecoration(

? ? ? ? ? ? ? ? border: Border(

? ? ? ? ? ? ? ? ? top: BorderSide(

? ? ? ? ? ? ? ? ? ? color: Color(0xfff0f0f0),

? ? ? ? ? ? ? ? ? ? width: 1,

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ),

? ? ? ? ? ? ? child: Row(

? ? ? ? ? ? ? ? children: [

? ? ? ? ? ? ? ? ? Container(

? ? ? ? ? ? ? ? ? ? width: 100,

? ? ? ? ? ? ? ? ? ? height: double.infinity,

? ? ? ? ? ? ? ? ? ? child: Scrollbar(

? ? ? ? ? ? ? ? ? ? ? thickness: 2,

? ? ? ? ? ? ? ? ? ? ? child: ListView.builder(

? ? ? ? ? ? ? ? ? ? ? ? physics: BouncingScrollPhysics(),

? ? ? ? ? ? ? ? ? ? ? ? shrinkWrap: true,

? ? ? ? ? ? ? ? ? ? ? ? itemBuilder: (c, index) {

? ? ? ? ? ? ? ? ? ? ? ? ? LeftData l = leftList[index];

? ? ? ? ? ? ? ? ? ? ? ? ? return GestureDetector(

? ? ? ? ? ? ? ? ? ? ? ? ? ? behavior: HitTestBehavior.opaque,

? ? ? ? ? ? ? ? ? ? ? ? ? ? onTap: () {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setState(() {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _leftIndex = index;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? print('_leftIndex: $_leftIndex');

? ? ? ? ? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? ? ? ? ? child: Container(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 44,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? width: double.infinity,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: _leftIndex == index ? Colors.white : Color(0xfff2f2f2),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? child: _leftIndex == index

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Stack(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // mainAxisAlignment: MainAxisAlignment.center,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? children: [

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Positioned(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? child: Center(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? child: Container(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? decoration: BoxDecoration(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? border: Border(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? left: BorderSide(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color(0xffc33b2a),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? width: 2,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 15,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? width: 2,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? margin: EdgeInsets.only(right: 8),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? left: 20,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? top: 12,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? bottom: 12,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // width: 2,

// height: 15,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Positioned(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? child: Text(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? l.name,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style: TextStyle(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color(0xff282828),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? left: 32,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? top: 12,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? bottom: 12,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ],

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? )

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? : Stack(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? children: [

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Positioned(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? child: Text(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? l.name,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style: TextStyle(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color(0xff282828),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? left: 32,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? top: 12,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? bottom: 12,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? )

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ],

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? );

? ? ? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? ? ? itemCount: leftList.length,

? ? ? ? ? ? ? ? ? ? ? ? itemExtent: 44,

? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? Expanded(

? ? ? ? ? ? ? ? ? ? child: Container(

? ? ? ? ? ? ? ? ? ? ? color: Colors.white,

? ? ? ? ? ? ? ? ? ? ? child: Scrollbar(

? ? ? ? ? ? ? ? ? ? ? ? thickness: 2,

? ? ? ? ? ? ? ? ? ? ? ? child: SingleChildScrollView(

? ? ? ? ? ? ? ? ? ? ? ? ? physics: BouncingScrollPhysics(),

? ? ? ? ? ? ? ? ? ? ? ? ? child: Container(

? ? ? ? ? ? ? ? ? ? ? ? ? ? padding: EdgeInsets.all(10),

? ? ? ? ? ? ? ? ? ? ? ? ? ? child: Wrap(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? spacing: 10,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? runSpacing: 10,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? children: List.generate(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 50,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (index) => Row(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? mainAxisSize: MainAxisSize.min,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? children: [

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? GestureDetector(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? behavior: HitTestBehavior.opaque,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? onTap: () {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setState(() {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (length < 20) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (totalItem[_leftIndex] == null)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? totalItem[_leftIndex] = [];

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? List<int> list = totalItem[_leftIndex];

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (!list.contains(index))

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? list.add(index);

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? else

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? list.remove(index);

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? print('totalItem: ${totalItem.toString()}');

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? print('最多只能選擇20個(gè)');

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _grow();

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? child: totalItem[_leftIndex] != null &&

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? totalItem[_leftIndex].contains(index)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Container(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 32,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding: EdgeInsets.symmetric(horizontal: 10),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? decoration: BoxDecoration(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? borderRadius: BorderRadius.all(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Radius.circular(2),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? border: Border.all(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color(0xffc33b2a),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? width: 1,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? child: Center(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? child: Text(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? '$_leftIndex組$index項(xiàng)',

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style: TextStyle(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color(0xffc33b2a),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? )

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? : Container(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 32,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding: EdgeInsets.symmetric(horizontal: 10),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? decoration: BoxDecoration(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? borderRadius: BorderRadius.all(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Radius.circular(2),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? border: Border.all(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color(0xffd0d0d0),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? width: 1,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? child: Center(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? child: Text(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? '$_leftIndex組$index項(xiàng)',

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style: TextStyle(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color(0xff282828),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ],

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? )

? ? ? ? ? ? ? ? ],

? ? ? ? ? ? ? ),

? ? ? ? ? ? ),

? ? ? ? ? ),

? ? ? ? ],

? ? ? ),

? ? );

? }

? List<Widget> _grow() {

? ? List<Widget> list = [];

? ? totalItem.forEach((key, value) {

? ? ? list.addAll(value

? ? ? ? ? .map(

? ? ? ? ? ? (e) => GestureDetector(

? ? ? ? ? ? ? behavior: HitTestBehavior.opaque,

? ? ? ? ? ? ? onTap: () {

? ? ? ? ? ? ? ? print('delete: $e');

? ? ? ? ? ? ? ? setState(() {

? ? ? ? ? ? ? ? ? totalItem[key].remove(e);

? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? },

? ? ? ? ? ? ? child: Row(

? ? ? ? ? ? ? ? mainAxisSize: MainAxisSize.min,

? ? ? ? ? ? ? ? children: [

? ? ? ? ? ? ? ? ? Container(

? ? ? ? ? ? ? ? ? ? height: 32,

? ? ? ? ? ? ? ? ? ? padding: EdgeInsets.symmetric(horizontal: 10),

? ? ? ? ? ? ? ? ? ? decoration: BoxDecoration(

? ? ? ? ? ? ? ? ? ? ? borderRadius: BorderRadius.all(

? ? ? ? ? ? ? ? ? ? ? ? Radius.circular(2),

? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? border: Border.all(

? ? ? ? ? ? ? ? ? ? ? ? color: Color(0xffc33b2a),

? ? ? ? ? ? ? ? ? ? ? ? width: 1,

? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? child: Center(

? ? ? ? ? ? ? ? ? ? ? child: Row(

? ? ? ? ? ? ? ? ? ? ? ? children: [

? ? ? ? ? ? ? ? ? ? ? ? ? Text(

? ? ? ? ? ? ? ? ? ? ? ? ? ? '$key組$e項(xiàng)',

? ? ? ? ? ? ? ? ? ? ? ? ? ? style: TextStyle(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color(0xffc33b2a),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? Text(

? ? ? ? ? ? ? ? ? ? ? ? ? ? 'x',

? ? ? ? ? ? ? ? ? ? ? ? ? ? style: TextStyle(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color(0xffc33b2a),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ? ? ],

? ? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ],

? ? ? ? ? ? ? ),

? ? ? ? ? ? ),

? ? ? ? ? )

? ? ? ? ? .toList());

? ? });

? ? return list;

? }

}

class LeftData {

? String name;

? int id;

? LeftData(this.name, this.id);

}

效果見下圖：

初始時(shí)默認(rèn)選擇到第一組

從左邊列表里篩選出標(biāo)簽后勾選上

不知道怎么弄gif圖赞弥，就看截圖吧毅整，哈哈

邏輯是：第一次進(jìn)入默認(rèn)選到第一組，展示第一組的所有標(biāo)簽绽左，然后根據(jù)選擇的哪一組悼嫉，從右邊標(biāo)簽里篩選出想要的，然后上面的區(qū)域展示勾選上的拼窥，點(diǎn)擊里面的x可以去掉該標(biāo)簽戏蔑，點(diǎn)擊下面的標(biāo)簽列表項(xiàng)也可以取消，上面的區(qū)域自適應(yīng)高度鲁纠。

寫的比較簡(jiǎn)單总棵，寫完這個(gè)之后，就把它拿到公司項(xiàng)目里改含，對(duì)接接口了彻舰，如果大家用得著，可以拿過去，把接口對(duì)上就ok了刃唤，

最后編輯于：2021.08.12 22:42:26

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末隔心，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子尚胞，更是在濱河造成了極大的恐慌硬霍，老刑警劉巖，帶你破解...
沈念sama閱讀 206,214評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件笼裳，死亡現(xiàn)場(chǎng)離奇詭異唯卖，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)躬柬，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,307評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門拜轨，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人允青，你說我怎么就攤上這事橄碾。” “怎么了颠锉？”我有些...
開封第一講書人閱讀 152,543評(píng)論 0贊 341
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵法牲，是天一觀的道長(zhǎng)。經(jīng)常有香客問我琼掠，道長(zhǎng)拒垃，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 55,221評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任瓷蛙，我火速辦了婚禮，結(jié)果婚禮上艰猬，老公的妹妹穿的比我還像新娘姥宝。我一直安慰自己恐疲，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 64,224評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布碳蛋。她就那樣靜靜地躺著省咨，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上穷缤，一...
開封第一講書人閱讀 49,007評(píng)論 1贊 284
城市分裂傳說
那天箩兽，我揣著相機(jī)與錄音，去河邊找鬼身坐。笑死，一個(gè)胖子當(dāng)著我的面吹牛部蛇，可吹牛的內(nèi)容都是我干的咐蝇。我是一名探鬼主播，決...
沈念sama閱讀 38,313評(píng)論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼撮竿，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼笔呀！你這毒婦竟也來了幢踏？” 一聲冷哼從身側(cè)響起许师，我...
開封第一講書人閱讀 36,956評(píng)論 0贊 259
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤微渠，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后逞盆，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,441評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡云芦，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,925評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年舅逸，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片琉历。...
茶點(diǎn)故事閱讀 38,018評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖彪置，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情宫蛆，我是刑警寧澤的猛，帶...
沈念sama閱讀 33,685評(píng)論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布耀盗，位于F島的核電站卦尊，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏岂却。R本人自食惡果不足惜躏哩，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,234評(píng)論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望扫尺。院中可真熱鬧，春花似錦正驻、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,240評(píng)論 0贊 19
一樁弒父案伤靠，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至宴合，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間丘侠，已是汗流浹背徒欣。一陣腳步聲響...
開封第一講書人閱讀 31,464評(píng)論 1贊 261
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留脂新，地道東北人。一個(gè)月前我還...
沈念sama閱讀 45,467評(píng)論 2贊 352
代替公主和親
正文我出身青樓级零，卻偏偏與公主長(zhǎng)得像滞乙，于是被迫代替她去往敵國和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子斩启，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,762評(píng)論 2贊 345