Flutter 从另一个 Widget 更改容器宽度答案

【问题标题】：Flutter change Container Width from another WidgetFlutter 从另一个 Widget 更改容器宽度
【发布时间】：2021-06-14 22:02:48
【问题描述】：

我有一个CustomAppBar 和一个PageViewer。如果用户正在更改Page，我想在CustomAppBar 内为ProgressBar 设置动画。

这是我的顶级页面，如下所示：

class EntryPage extends StatelessWidget {
  
  final List<Widget> _pages = [BasicValuesPage(), GeneralConditionPage()];
  int currentStep = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(
          scaleWidth(120),
        ),
        child: Container(
          decoration: BoxDecoration(
              color: AppColors.secondary,
              borderRadius: new BorderRadius.only(
                bottomLeft: Radius.circular(
                  scaleWidth(20),
                ),
                bottomRight: Radius.circular(
                  scaleWidth(20),
                ),
              )),
          child: AppBarContent(
            step: currentStep,
          ),
        ),
      ),
      body: Center(
        child: _buildPageViewer(),
      ),
    );
  }

  PageView _buildPageViewer() {
    return PageView.builder(
      itemBuilder: (context, position) {
        return _pages[position];
      },
      itemCount: _pages.length,
      onPageChanged: (int step) {
        currentStep = step;
      },
    );
  }
}

如您所见，我正在使用AppBarContent，其中我正在传递currentStep，我在_buildPageView、onPageChanged 的底部进行了更新。

这是我的AppBarContent：

class AppBarContent extends StatelessWidget {
  final int step;

  const AppBarContent({required this.step, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
         ProgressBar(
           step: step,
         ),
      ],
     );
    }
 }

如你所见，我还将step 传递给我的ProgressBar，这是我真正想要为ContainerWidth 设置动画的地方：

class ProgressBar extends StatelessWidget {
  final int step;

  const ProgressBar({required this.step, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final double _containerWidth = MediaQuery.of(context).size.width - (2 * 16);
    return Stack(
      children: [
        Container(
          color: AppColors.white.withAlpha(37),
          height: scaleWidth(6),
          width: _containerWidth,
        ),
        AnimatedContainer(
          width: _containerWidth * (step * 7),
          duration: Duration(milliseconds: 100),
        ),
      ],
    );
  }
}

我的目标是，如果用户更改页面，我的ProgressBar 中的AnimatedContainer 的width 应该动画为新的width。

我怎样才能做到这一点？我搜索了它，但找不到任何东西。任何帮助表示赞赏！如果您需要更多信息，请告诉我！

【问题讨论】：

标签： flutter dart callback widget flutter-pageview

【解决方案1】：

包装这个回调函数

      onPageChanged: (int step) {
        currentStep = step;
      },

在setState:

      onPageChanged: (int step) {
        setState(){
          currentStep = step;
        }
      },

如果您使用的是 Dart 2.1 版，整数文字可以直接用于需要双精度的地方，如果是旧版本，您必须另外将您的 int 步骤转换为双精度。

【讨论】：