当前位置：首页 > news >正文

滚动菜单 flutter

news 2025/7/22 18:54:38

想实现这个功能：

在这里插入图片描述

下面的代码可以实现：

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {static const String _title = 'Flutter Code Sample';@overrideWidget build(BuildContext context) {return MaterialApp(title: _title,home: MyStatefulWidget(),);}
}class MyStatefulWidget extends StatefulWidget {MyStatefulWidget({Key key}) : super(key: key);@override_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}class _MyStatefulWidgetState extends State<MyStatefulWidget> {int _selectedIndex = 0;@overrideWidget build(BuildContext context) {return Scaffold(body: Row(children: <Widget>[LayoutBuilder(builder: (context, constraint) {return SingleChildScrollView(child: ConstrainedBox(constraints: BoxConstraints(minHeight: constraint.maxHeight),child: IntrinsicHeight(child: NavigationRail(selectedIndex: _selectedIndex,onDestinationSelected: (int index) {setState(() {_selectedIndex = index;});},labelType: NavigationRailLabelType.selected,destinations: [NavigationRailDestination(icon: Icon(Icons.favorite_border),selectedIcon: Icon(Icons.favorite),label: Text('First'),),NavigationRailDestination(icon: Icon(Icons.bookmark_border),selectedIcon: Icon(Icons.book),label: Text('Second'),),NavigationRailDestination(icon: Icon(Icons.star_border),selectedIcon: Icon(Icons.star),label: Text('Third'),),NavigationRailDestination(icon: Icon(Icons.favorite_border),selectedIcon: Icon(Icons.favorite),label: Text('First'),),NavigationRailDestination(icon: Icon(Icons.bookmark_border),selectedIcon: Icon(Icons.book),label: Text('Second'),),NavigationRailDestination(icon: Icon(Icons.star_border),selectedIcon: Icon(Icons.star),label: Text('Third'),),NavigationRailDestination(icon: Icon(Icons.bookmark_border),selectedIcon: Icon(Icons.book),label: Text('Second'),),NavigationRailDestination(icon: Icon(Icons.star_border),selectedIcon: Icon(Icons.star),label: Text('Third'),),NavigationRailDestination(icon: Icon(Icons.favorite_border),selectedIcon: Icon(Icons.favorite),label: Text('First'),),NavigationRailDestination(icon: Icon(Icons.bookmark_border),selectedIcon: Icon(Icons.book),label: Text('Second'),),NavigationRailDestination(icon: Icon(Icons.star_border),selectedIcon: Icon(Icons.star),label: Text('Third'),),NavigationRailDestination(icon: Icon(Icons.bookmark_border),selectedIcon: Icon(Icons.book),label: Text('Second'),),NavigationRailDestination(icon: Icon(Icons.star_border),selectedIcon: Icon(Icons.star),label: Text('Third'),),NavigationRailDestination(icon: Icon(Icons.favorite_border),selectedIcon: Icon(Icons.favorite),label: Text('First'),),NavigationRailDestination(icon: Icon(Icons.bookmark_border),selectedIcon: Icon(Icons.book),label: Text('Second'),),NavigationRailDestination(icon: Icon(Icons.star_border),selectedIcon: Icon(Icons.star),label: Text('Third'),),],),),),);},),VerticalDivider(thickness: 1, width: 1),// This is the main content.Expanded(child: Center(child: Text('selectedIndex: $_selectedIndex'),),)],),);}
}