有没有办法减少Flutter中NavigationRail中每个元素的高度？

路易斯菲利普

假设我有以下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(''),
              ),
            ],
          )
        ],
      ),
    );
  }
}

外观：

chunhunghan

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] 删除。