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

Posted 2023-02-23

【中文标题】Flutter 从另一个 Widget 更改容器宽度

【英文标题】：Flutter change Container Width from another 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。

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

【参考方案1】：

包装这个回调函数

      onPageChanged: (int step) 
        currentStep = step;
      ,

在setState:

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

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