Flutter Ui 实验室（六）侧边栏菜单

还是先上截图吧

image.png

代码也很简单，直接用ListView.builder，就不细说了，直接贴代码

import 'package:flutter/material.dart';

class SideListViewMenu extends StatefulWidget {
  @override
  _SideListViewMenuState createState() => _SideListViewMenuState();
}

class _SideListViewMenuState extends State<SideListViewMenu> {
  // List<String> _menuStr = [
  //   'menu 1',
  //   'menu 2',
  //   'menu 3',
  //   'menu 4',
  //   'menu 5',
  //   'menu 6',
  //   'menu 7',
  //   'menu 8',
  //   'menu 9'
  // ];
  var _menuStr = [];
  int _selectedIdx = 0;
  final _menuHeight = 50.0;
  final _menuWidth = 100.0;

  @override
  void initState() {
    _menuStr = new List<String>.generate(20, (i) => "menu $i");
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Side ListView Menu'),
      ),
      body: Row(
        children: <Widget>[
          Container(
            width: _menuWidth,
            child: ListView.builder(
              itemCount: _menuStr.length,
              itemBuilder: (context, index) {
                String str = _menuStr[index];
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      _selectedIdx = index;
                    });
                  },
                  child: Column(
                    children: <Widget>[
                      Container(
                        height: _menuHeight,
                        color: (_selectedIdx == index)
                            ? Colors.grey
                            : Colors.white,
                        child: Row(
                          children: <Widget>[
                            Container(
                              width: 5,
                              height: _menuHeight,
                              color: (_selectedIdx == index)
                                  ? Colors.yellowAccent
                                  : Colors.white,
                            ),
                            Expanded(
                              child: Center(
                                child: Text(str),
                              ),
                            )
                          ],
                        ),
                      ),
                      Container(
                        height: 1,
                        color: Colors.blueGrey,
                      )
                    ],
                  ),
                );
              },
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.blueGrey,
              child: Center(
                child: Text(
                  _menuStr[_selectedIdx],
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}