flutter左侧滑动选项实现基础

效果就是左侧一个滑动选项 

 

import 'package:flutter/material.dart';

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),
        leftListv(7,leftList,onMenuChecked)
        ],
      )
    );
  }
  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,
     );
  }
}