时间戳

首页 > 解决方案 > 如何在颤振中添加侧边栏

flutter - 如何在颤振中添加侧边栏

问题描述

我正在尝试学习如何设计侧边栏，我在网上找到了这张图片。我已经成功开发了一个简单的侧边栏，但无法完全像这样设计。由于我是 Flutter 的新手，所以我不知道如何在点击时添加此曲线形状和动画。这是我需要你帮助的地方。

这是图像

这是我到目前为止所做的：

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Home',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.red.withOpacity(0.3),
      ),
      backgroundColor: Colors.red.withOpacity(0.3),
      body: Row(
        children: [
          sideBar(),
        ],
      ),
    );
  }

  Widget sideBar() {
    final List<String> items = ['Snacks', 'Drinks', 'Food'];
    return Container(
      color: Colors.white,
      child: Column(
        children: items
            .map((e) => Padding(
                  padding: const EdgeInsets.all(14.0),
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        _selectedIndex = items.indexOf(e);
                      });
                    },
                    child: Row(
                      children: [
                        RotatedBox(quarterTurns: 3, child: Text(e)),
                        if (items.indexOf(e) == _selectedIndex)
                          const Padding(
                            padding: EdgeInsets.only(left: 8.0),
                            child: CircleAvatar(
                              backgroundColor: Colors.deepOrange,
                              radius: 5.0,
                            ),
                          )
                      ],
                    ),
                  ),
                ))
            .toList(),
      ),
    );
  }
}

这是输出：

标签： flutterandroid-studiodartuser-interfacesidebar

解决方案

而不是这个：

if (items.indexOf(e) == _selectedIndex)
    const Padding(
    padding: EdgeInsets.only(left: 8.0),
    child: CircleAvatar(
        backgroundColor: Colors.deepOrange,
        radius: 5.0,
    ),
)

使用类似下面的东西。

Padding(
    padding: EdgeInsets.only(left: 8.0),
    child: CircleAvatar(
        backgroundColor: items.indexOf(e) == _selectedIndex 
            ? Colors.deepOrange 
            : Colors.transparent,
        radius: 5.0,
    ),
)

此代码只会更改选择指示器的颜色，而不是每次添加和更改布局。

对侧边栏项目颜色执行相同操作。

RotatedBox(
    quarterTurns: 3, 
    child: Text(
        e, 
        style: TextStyle(
            color: items.indexOf(e) == _selectedIndex 
                ? Colors.black 
                : Colors.grey
        ),
    )
),

是为你寻找吗？

推荐阅读