Navigationrail 前導/尾隨左對齊

Question

我有一個帶有按鈕的Navigationrail小部件來擴展/折疊它。 當extend=false時， Trailing/leading小部件與NavigationRailDestination在一行中，但當extend=true時， trailing/leading小部件始終與中心對齊。

是否可以將其與左/右對齊？

我的目標：當navigationrail擴展時， trailing/leading小部件不應將其位置更改為居中。

Answer 1

我通過編輯這個例子找到了一個解決方案： https://api.flutter.dev/flutter/material/NavigationRail/extendedAnimation.html

解決方法：使用NavigationRail的Animation

final Animation<double> animation =
        NavigationRail.extendedAnimation(context);

然后使用 lerpDouble function 根據它更改寬度/填充：

padding: EdgeInsets.only(
        right: lerpDouble(0, 200, animation.value)!,
        bottom: 30,
      ),

完整的工作代碼：

import 'dart:ui';
import 'package:flutter/material.dart';

class NavigationRailMenuButton extends StatelessWidget {

   const NavigationRailMenuButton({super.key, this.onPressed});
   final VoidCallback? onPressed;
   
   @override
   Widget build(BuildContext context) {
    final Animation<double> animation =
        NavigationRail.extendedAnimation(context);
    return AnimatedBuilder(
      animation: animation,
      builder: (BuildContext context, Widget? child) {
        return Container(
          padding: EdgeInsets.only(
            right: lerpDouble(0, 200, animation.value)!,
          ),
          child: IconButton(
            icon: const Icon(Icons.menu),
            iconSize: 32,
            onPressed: onPressed,
          ),
        );
      },
    );
  }
}