Question

我想在CustomScrollView中使用动画切换状态，但是会引发错误。

class SliverAnimatedSwitcher extends StatefulWidget {
  final state;

  const SliverAnimatedSwitcher({Key key, this.state}) : super(key: key);

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

class _SliverAnimatedSwitcherState extends State<SliverAnimatedSwitcher> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('SliverAnimatedSwitcher'),
          ),
          _buildContent(),
        ],
      ),
    );
  }

  get state => widget.state;

  Widget _buildContent() {
    var content;
    if (state.isNotEmpty == true) {
      content = SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            var item = state.items[index];
            return ListTile(
              title: Text(item.title),
            );
          },
          childCount: state.items.length,
        ),
      );
    } else if (state.isError) {
      content = SliverFillRemaining(
        key: Key('error'),
        child: Container(alignment: Alignment.center, child: Text('Error')),
      );
    } else if (state.isLoading) {
      content = SliverFillRemaining(
        key: Key('loading'),
        child: Container(alignment: Alignment.center, child: Text('Loading')),
      );
    } else {
      content = SliverFillRemaining(
        key: Key('empty'),
        child: Container(alignment: Alignment.center, child: Text('Empty')),
      );
    }
    return AnimatedSwitcher(
      duration: Duration(milliseconds: 300),
      child: content,
    );
  }
}

Answer 1

pub.dev 上有一个带有 sliver_tools 的 SliverAnimatedSwitcher 包。你会像这样使用它：

opTable :: [[Operator Parser Expr]]
opTable = [[ indexAccessChain ]]

indexAccessChain = Postfix $ foldr1 (flip (.)) <$> some (singleIndex <|> singleAccess)

singleIndex = flip ArrayIndex <$> brackets expr
singleAccess = flip Access <$> (char '.' *> identifier)

Answer 2

这是因为银色小部件无法与Stack中用作布局生成器的AnimatedSwitcher一起使用。

我找到了一个临时解决方案。虽然结果不等于原始结果（仅显示结果中的最后一个小部件），但我认为现在这样花费很少就可以接受。

首先创建一个SliverAnimatedSwitcher与AnimatedSwitcher here完全相同的代码
修改Stack部分以仅返回currentChild（defaultLayoutBuilder）
将FadeTransition更改为SliverFadeTransition（defaultTransitionBuilder）

。

static Widget defaultLayoutBuilder(Widget currentChild, List<Widget> previousChildren) {
  return currentChild;
}

。

static Widget defaultTransitionBuilder(Widget child, Animation<double> animation) {
  return SliverFadeTransition(
    opacity: animation,
    sliver: child,
  );
}

如果有人可以找到一种将Sliver小部件彼此堆叠的方法，则结果可能会更完美。

Answer 3

我找到了一种在条子上添加FadeTransition而不是AnimatedSwitcher的方法。

尝试一下：


    SliverAnimatedOpacity(
        opacity: yourCondition ? 1.0 : 0.0,
        duration: Duration(seconds: 1),
        sliver: yourCondition
            ? SliverGrid()
            : SliverToBoxAdapter(
                child: Center(
                  child: CircularProgressIndicator(),
                ),
              ));

此处有更多信息：https://api.flutter.dev/flutter/widgets/SliverAnimatedOpacity-class.html

如何一起使用AnimatedSwitcher和CustomScrollView

3 个答案: