Question

因此，我正在开发塔罗牌应用程序，但我不知道如何使此页面可滚动。我目前正在使用元素SingleChildScrollView来包装我的元素。现在，它向下滚动一部分，然后被卡住，然后向上弹回，下面看不到屏幕的其余部分。

我想我应该使用多子级滚动视图小部件，但不确定如何使它工作。

我正在寻找的是能够显示元素列表并使它们在页面上滚动。

我敢肯定，如果有人可以帮我解决这个问题，那我做错了！ :)预先感谢您的帮助和建议

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                child: getSpread(widget.selected),
              ),
              ListView.builder(
                itemCount: widget.selected.length,
                itemBuilder: (context, index) {
                  final int cardNumber = widget.selected[index];
                  final TarotCard tarotCard = tarotMaster.tarotDeck[cardNumber];
                  return TarotCardDetails(tarotCard: tarotCard);
                },
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
              ),
              BottomButton(
                onTap: () {
                  Navigator.pushNamed(context, '/home');
                  print(widget.selected);
                },
                buttonTitle: 'BACK TO HOME',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

在physics中使用ListView.builder()会发生此问题是因为flutter不知道要滚动什么，因为它发现了两个可滚动的小部件。您可以指定一个空的ScrollPhysics，以便flutter知道ListView不需要滚动，而是整个页面，SingleChildScrollView个要滚动的小部件项目

@override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    child: getSpread(widget.selected),
                  ),
                  ListView.builder(
                    physics: ScrollPhysics(),
                    itemCount: widget.selected.length,
                    itemBuilder: (context, index) {
                      final int cardNumber = widget.selected[index];
                      final TarotCard tarotCard = tarotMaster.tarotDeck[cardNumber];
                      return TarotCardDetails(tarotCard: tarotCard);
                    },
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                  ),
                  BottomButton(
                    onTap: () {
                      Navigator.pushNamed(context, '/home');
                      print(widget.selected);
                    },
                    buttonTitle: 'BACK TO HOME',
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }

希望这会对您有所帮助。

如何使用Flutter滚动页面？

1 个答案: