flutter 左右联动

在Flutter中实现左右联动效果，通常是通过状态管理来控制两个组件之间的相互影响。一个常见的应用场景是滑动导航菜单（Drawer）和页面内容之间的联动，当用户在导航菜单中选择一个选项时，主内容区域会相应地更新显示对应的内容。实现这种效果可以使用各种状态管理工具，如setState()、Provider、Bloc等。

以下是使用setState()来实现简单的左右联动的一个基本例子：

1. 创建一个StatefulWidget，它会包含两个子部件，一个用于显示左右两部分的内容，一个用于滑动联动的状态控制。
2. 使用Row或Stack等布局组件来放置左右两部分的部件。
3. 左侧部件可以是一个列表或者菜单项，右侧部件是主内容显示区。
4. 为左侧的每个菜单项设置点击事件，当点击菜单项时，通过调用setState()更新一个状态变量，这个状态变量用于控制右侧部件显示的内容。

class LeftRightExample extends StatefulWidget {
  @override
  _LeftRightExampleState createState() => _LeftRightExampleState();
}

class _LeftRightExampleState extends State<LeftRightExample> {
  int selectedIndex = 0; // 控制右侧显示内容的索引

  void updateIndex(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        // 左侧菜单
        Container(
          width: 100,
          child: ListView.builder(
            itemCount: 3,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item $index'),
                onTap: () => updateIndex(index),
              );
            },
          ),
        ),
        // 右侧内容区
        Expanded(
          child: Center(
            child: Text('Content of item $selectedIndex'),
          ),
        ),
      ],
    );
  }
}

在上述代码中，左侧的菜单项使用了ListTile，并在onTap事件中调用updateIndex方法，该方法通过setState更新状态变量selectedIndex的值。右侧的部件根据selectedIndex的值来动态显示不同的内容。