假设我有以下NavigationRail:
我知道这个小部件是相当新的,因此,其功能可能受到限制。但是,我想知道是否有任何方法可以减小NavigationRail中每个元素的高度,例如我在上图所示的元素,因为NavigationRail小部件中的参数似乎不允许这样到现在为止。
编辑:我做了chunhhanhan所说的,即使这样,问题仍然存在。即使使用容器,每个元素的宽度和高度也保持不变。我的代码:
class _HomePageState extends ModularState<HomePage, HomeController> {
int selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
NavigationRail(
onDestinationSelected: (index) {
selectedIndex = index;
},
backgroundColor: navigationRailColor,
selectedIndex: selectedIndex,
destinations: [
NavigationRailDestination(
icon:
Container(height: 200, child: Icon(Icons.favorite_border)),
selectedIcon:
Container(height: 200, child: Icon(Icons.favorite)),
label: Text(''),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border),
selectedIcon: Icon(Icons.book),
label: Text(''),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
label: Text(''),
),
],
)
],
),
);
}
}
外观:
You can copy paste run full code below
You can use Container
wrap icon
and provide height
I use a large value 200 for demo purpose
NavigationRailDestination(
icon:
Container(height: 200, child: Icon(Icons.favorite_border)),
selectedIcon:
Container(height: 200, child: Icon(Icons.favorite)),
label: Text(''),
),
working demo
full code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget 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;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("demo"),
),
body: Row(
children: <Widget>[
NavigationRail(
selectedIndex: _selectedIndex,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
labelType: NavigationRailLabelType.selected,
destinations: [
NavigationRailDestination(
icon:
Container(height: 200, child: Icon(Icons.favorite_border)),
selectedIcon:
Container(height: 200, child: Icon(Icons.favorite)),
label: Text(''),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border),
selectedIcon: Icon(Icons.book),
label: Text(''),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
label: Text(''),
),
],
),
VerticalDivider(thickness: 1, width: 1),
// This is the main content.
Expanded(
child: Center(
child: Text('selectedIndex: $_selectedIndex'),
),
)
],
),
);
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句