Flutter开发：如何将NavigationRail的Destinations显示在底部？

不需要自定义NavigationRail，通过调整布局和组件属性就能实现需求，具体操作如下：

• 让NavigationRail占据左侧栏的全部垂直空间：将NavigationRail包裹在Expanded组件中，确保组件高度充满父布局；
• 设置NavigationRail的mainAxisAlignment为MainAxisAlignment.end，让内部的destinations自动对齐到底部。

修改后的完整代码：

import 'package:flutter/material.dart';

class MyDesktopBody extends StatefulWidget {
  const MyDesktopBody({
    super.key,
  });

  @override
  State<MyDesktopBody> createState() => _MyDesktopBodyState();
}

class _MyDesktopBodyState extends State<MyDesktopBody> {
  NavigationRailLabelType labelType = NavigationRailLabelType.all;
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("BDK Akademi"),
      ),
      backgroundColor: Colors.blueAccent,
      body: Row(
        children: [
          // 用Expanded让NavigationRail充满左侧垂直空间
          Expanded(
            child: NavigationRail(
              onDestinationSelected: (value) {
                setState(() {
                  _selectedIndex = value;
                });
              },
              destinations: const [
                NavigationRailDestination(
                    icon: Icon(Icons.home), label: Text("Anasayfa")),
                NavigationRailDestination(
                    icon: Icon(Icons.text_snippet_sharp),
                    label: Text("Instagram Eğitimi")),
                NavigationRailDestination(
                    icon: Icon(Icons.account_box), label: Text("Hesabım")),
              ],
              selectedIndex: _selectedIndex,
              labelType: NavigationRailLabelType.all,
              // 设置mainAxisAlignment让destinations对齐到底部
              mainAxisAlignment: MainAxisAlignment.end,
            ),
          ),
          // 右侧主内容区域（可根据需求调整）
          const Expanded(
            child: Center(
              child: Text("主内容区域"),
            ),
          )
        ],
      ),
    );
  }
}

关键说明 #

• Expanded是核心前提：如果NavigationRail高度仅包裹自身内容，mainAxisAlignment的设置不会生效，必须让组件充满左侧栏的垂直空间；
• mainAxisAlignment: MainAxisAlignment.end是NavigationRail的内置属性，直接控制内部destinations的垂直对齐，无需自定义组件。

内容的提问来源于stack exchange，提问作者tfy