在我的 flutter TV 项目中,我使用 NavigationRail 小部件作为侧栏,我想更改默认的悬停颜色,但是我在 NavigationRail 小部件属性中没有找到该选项。
我想要:
Dartpad 示例代码 dartpad 示例代码
import 'package:flutter/material.dart';
/// Flutter code sample for [NavigationRail].
void main() => runApp(const NavigationRailExampleApp());
class NavigationRailExampleApp extends StatelessWidget {
const NavigationRailExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
sliderTheme: const SliderThemeData(
showValueIndicator: ShowValueIndicator.always,
activeTrackColor: Colors.white,
thumbColor: Colors.white,
valueIndicatorColor: Colors.red),
listTileTheme: const ListTileThemeData(
iconColor: Colors.white, textColor: Colors.white),
appBarTheme:
AppBarTheme(backgroundColor: Colors.grey.shade900, elevation: 0),
applyElevationOverlayColor: true,
focusColor: Colors.grey,
scaffoldBackgroundColor: Colors.grey.shade900,
navigationRailTheme: NavigationRailThemeData(
backgroundColor: Colors.grey.shade900,
unselectedLabelTextStyle: const TextStyle(
color: Colors.white,
),
selectedLabelTextStyle: TextStyle(color: Colors.yellow.shade700),
unselectedIconTheme: const IconThemeData(color: Colors.white),
selectedIconTheme: const IconThemeData(color: Colors.yellow),
indicatorColor: Colors.grey.shade200),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
elevation: MaterialStateProperty.all(0),
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey.shade900),
shadowColor: MaterialStateProperty.all<Color>(
Colors.grey.shade700)), // Here Im having the error
)),
home: NavRailExample(),
);
}
}
class NavRailExample extends StatefulWidget {
const NavRailExample({super.key});
@override
State<NavRailExample> createState() => _NavRailExampleState();
}
class _NavRailExampleState extends State<NavRailExample> {
int _selectedIndex = 0;
NavigationRailLabelType labelType = NavigationRailLabelType.all;
bool showLeading = false;
bool showTrailing = false;
double groupAlignment = -1.0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
NavigationRail(
extended: true,
groupAlignment: groupAlignment,
labelType: NavigationRailLabelType.none,
selectedIndex: _selectedIndex,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
leading: showLeading
? FloatingActionButton(
elevation: 0,
onPressed: () {
// Add your onPressed code here!
},
child: const Icon(Icons.add),
)
: const SizedBox(),
trailing: showTrailing
? IconButton(
onPressed: () {
// Add your onPressed code here!
},
icon: const Icon(Icons.more_horiz_rounded),
)
: const SizedBox(),
destinations: const <NavigationRailDestination>[
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'),
),
],
),
const VerticalDivider(thickness: 1, width: 1),
// This is the main content.
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('selectedIndex: $_selectedIndex'),
const SizedBox(height: 20),
Text('Label type: ${labelType.name}'),
const SizedBox(height: 10),
OverflowBar(
spacing: 10.0,
children: <Widget>[
ElevatedButton(
onPressed: () {
setState(() {
labelType = NavigationRailLabelType.none;
});
},
child: const Text('None'),
),
ElevatedButton(
onPressed: () {
setState(() {
labelType = NavigationRailLabelType.selected;
});
},
child: const Text('Selected'),
),
ElevatedButton(
onPressed: () {
setState(() {
labelType = NavigationRailLabelType.all;
});
},
child: const Text('All'),
),
],
),
const SizedBox(height: 20),
Text('Group alignment: $groupAlignment'),
const SizedBox(height: 10),
OverflowBar(
spacing: 10.0,
children: <Widget>[
ElevatedButton(
onPressed: () {
setState(() {
groupAlignment = -1.0;
});
},
child: const Text('Top'),
),
ElevatedButton(
onPressed: () {
setState(() {
groupAlignment = 0.0;
});
},
child: const Text('Center'),
),
ElevatedButton(
onPressed: () {
setState(() {
groupAlignment = 1.0;
});
},
child: const Text('Bottom'),
),
],
),
const SizedBox(height: 20),
OverflowBar(
spacing: 10.0,
children: <Widget>[
ElevatedButton(
onPressed: () {
setState(() {
showLeading = !showLeading;
});
},
child:
Text(showLeading ? 'Hide Leading' : 'Show Leading'),
),
ElevatedButton(
onPressed: () {
setState(() {
showTrailing = !showTrailing;
});
},
child: Text(
showTrailing ? 'Hide Trailing' : 'Show Trailing'),
),
],
),
],
),
),
],
),
);
}
}
可能已经找到了答案,但是对于那些可能偶然发现这个问题的人,您需要在您的主题中添加一个 indicatorShape:
indicatorShape: RoundedRectangleBorder()