Question

背景： 简而言之，这个项目的目标是有一个 Flutter 应用程序，它有一个底部导航选项卡，其中一个选项卡（选项卡 1）包含一个列表有状态的小部件卡。在脚手架的应用栏中包含一个按钮，用于切换与卡片大小相关的布尔值（默认为 true）。按下此按钮后，卡片将通过设置声明一个布尔值来缩小（或以相反的方式放大），该布尔值将通过三元运算符更改卡片的高度，从而为大小变化设置动画。

问题：为了实现这一点，我已将 bool 状态更改传递给卡本身。因此，一旦点击按钮，此更改将传递给 Tab1 小部件，然后将其作为应处理更改的属性传递给卡片。然而，卡片只是用新值重建自己，缩短动画。大小确实发生了变化，但由于它正在重建，因此它以与 bool 值相关联的高度值开始，并且对用户而言，只是出现。只是为了尝试，我在卡片中构建了一个临时按钮，单击该按钮以更改 bool 值后，卡片会为大小更改设置动画（项目明智，将按钮放在卡片中将不起作用）。因此，仅当我需要将其从选项卡脚手架传递到选项卡到卡片时才会出现此问题。以下是我认为导致问题的一些代码：

class Scaffold extends StatefulWidget {
  @override
  _ScaffoldState createState() => _ScaffoldState();
}

class _ScaffoldState extends State<Scaffold> {
  int _selectedIndex = 0;
  bool cardViewToggle = true;
  List<Widget> _tabScreens() => [
        Tab1(
          cardViewToggle: cardViewToggle,
        )
      ];
@override
  Widget build(BuildContext context) {
...
leading: cardViewToggle
                ? IconButton(
                    icon: Icon(
                      Icons.view_day,
                      color: Theme.of(context).buttonColor,
                    ),
                    onPressed: () async {
                      setState(() {
                        cardViewToggle = false;
                      });
                    },
                  )
                : IconButton(
                    icon: Icon(
                      Icons.view_list,
                      color: Theme.of(context).buttonColor,
                    ),
                    onPressed: () async {
                      setState(() {
                        cardViewToggle = true;
                      });
                    },
                  ),

...
class Tab1 extends StatefulWidget {
  const Tab1({this.cardViewToggle});
  final bool cardViewToggle;

  @override
  _Tab1State createState() => _Tab1State();
}

class _Tab1State extends State<Tab1> {
@override
  Widget build(BuildContext context) {
...
indexedItemBuilder: (context, element, index) {
                return myCard(
                    cardViewToggle: widget.cardViewToggle,
                  ),
                );
              },
...
class myCard extends StatefulWidget {
  const myCard(
      {this.cardViewToggle});
  final bool cardViewToggle;

  @override
  _myCardState createState() => _myCardState();
}

class _myCardState extends State<myCard> {
@override
  Widget build(BuildContext context) {
return AnimatedContainer(
              duration: Duration(milliseconds: 500),
              height: widget.cardViewToggle ? 225 : 100,
              child: ...

虽然代码是缩写的，但我如何简单地将数据传递给卡片，以便它可以在不重建整个卡片的情况下对其更改进行动画处理，从而首先跳过动画？任何示例或演示都会有所帮助。从某种意义上说，我希望重建“价值”而不是整张卡片，以便用户可以看到变化。感谢您的帮助，如果您需要更多相关信息，请告诉我！

在 Flutter 中更新 AnimatedContainer 的值而不重建小部件

0 个答案: