簡體   English   中英

Flutter-如何制作PageView和ListView?

[英]Flutter - How to make PageView & ListView?

我正在嘗試從此水平滾動卡中使用PageView,PageController和ListView制作輪播,並在flutter中具有Snap效果 但這引發了異常...

渲染庫引起的異常CA ════════════════I / flutter(17678):在performResize()期間引發了以下斷言:I / flutter(17678):水平視口的高度不受限制。 I / flutter(17678):視口在橫軸上擴展以填充其容器,並約束其子項以匹配I / flutter(17678):其在橫軸上的范圍。 在這種情況下,水平視口將獲得無限量的I /顫振(17678):可在其中擴展的垂直空間。

有人可以幫我解決嗎?

我想在背景圖像,變換類和淡入淡出的堆棧中添加此輪播。

  @override
  void initState() {
   super.initState();
    controller = PageController(
     initialPage: 0,
     keepPage: true,
    );

 @override
  Widget build(BuildContext context) {

    return AnimatedBuilder(
        builder: (BuildContext context, Widget child) {
         return Scaffold(
           //BODY
          body: ListView(children: <Widget>[
            new Stack(
              children: <Widget>[
                new AspectRatio(...),
                new Transform(...),
                //THIS IS
                new ListView.builder(
                  itemCount: 3,
                  scrollDirection: Axis.horizontal,
                  padding: EdgeInsets.symmetric(vertical: 16.0),
                  itemBuilder: (BuildContext context, int index) {
                    if (index % 3 == 0) {
                      return _buildCarousel(context, index ~/ 3);
                    } else {
                      return Divider();
                    }
                  },
                ),
            }
         }
   }
   Widget _buildCarousel(BuildContext context, int carouselIndex) {
    return Column(
     mainAxisSize: MainAxisSize.min,
     children: <Widget>[
       Text('Carousel $carouselIndex'),
       SizedBox(
       // you may want to use an aspect ratio here for tablet support
         height: 200.0,
         child: PageView.builder(
        // store this controller in a State to save the carousel scroll position
         controller: PageController(viewportFraction: 0.8),
         itemBuilder: (BuildContext context, int itemIndex) {
           return _buildCarouselItem(context, carouselIndex, itemIndex);
         },
       ),
     )
   ],
 );
  Widget _buildCarouselItem(
    BuildContext context, int carouselIndex, int itemIndex) {
     return Padding(
     padding: EdgeInsets.symmetric(horizontal: 4.0),
       child: Container(
        decoration: BoxDecoration(
        color: Colors.grey,
        borderRadius: BorderRadius.all(Radius.circular(4.0)),
      ),
    ),
  );

這是完整的代碼https://pastebin.com/xXRkaWuR

正如您可能從錯誤中猜到的那樣,基本上,這意味着由於您沒有指定有限的高度,因此ListView正在獲得無限的高度。 嘗試在ListView.builderListView內使用shrinkWrap: true

或者,您也可以嘗試將ListView包裝在高度有限的ContainerSizedBox中。

例-

Container(
  height: 200.0,
  child: ListView(
   /*Remaining Code*/
  ),
)

您可以嘗試使用ListView.builder進行相同的操作

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM