时间戳

首页 > 解决方案 > 堆栈小部件内的列表视图不起作用（滚动方向：Axis.vertical）

flutter - 堆栈小部件内的列表视图不起作用（滚动方向：Axis.vertical）

问题描述

我需要做这个设计

在此处输入图像描述

这是我的代码结果

在此处输入图像描述

但是当我添加列表视图时它不起作用

我需要垂直列表而不是水平
ListView.builder(scrollDirection: Axis.vertical, shrinkWrap: true, itemCount: 12, itemBuilder: (context,index){ return Text("我的小部件卡将添加这里”）; }）

这是我的代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; 

class MyAppNameAppTemplesListing extends StatefulWidget {
  MyAppNameAppTemplesListing({Key key}) : super(key: key);

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

class _MyAppNameAppTemplesListingState
    extends State<MyAppNameAppTemplesListing> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          height: MediaQuery.of(context).size.height*.4,
        ),
        Container(
          height: MediaQuery.of(context).size.height*.14,
          color: Colors.pink[100],
        ),
       Positioned(
         child:  Padding(
           padding: const EdgeInsets.all(8.0),
           child: Text("Temples",style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold),),
         ),
       ),
        Positioned(
          top: 55,
          child: Padding(
            padding: const EdgeInsets.only(left: 4,right: 4),
            child:

            Column(

              mainAxisSize: MainAxisSize.min,

              children: <Widget>[
                Stack(
                  children: <Widget>[
                    Container(
                      height: 50.0,
                      width: MediaQuery.of(context).size.width*.97,
                      color: Colors.transparent,
                      child: new Container(
                          decoration: new BoxDecoration(
                              color: Colors.white,
                              borderRadius: new BorderRadius.only(
                                  topLeft: const Radius.circular(40.0),
                                  bottomLeft: const Radius.circular(40.0),
                                  bottomRight: const Radius.circular(40.0),
                                  topRight: const Radius.circular(40.0))),
                          child: new Center(
                            child: Container(
                                margin: EdgeInsets.only(left: MediaQuery.of(context).size.width*.4),
                                child: new Text("Favourite",style: TextStyle(fontSize: 16, color: Colors.grey,fontWeight: FontWeight.bold),)),
                          )),
                    ),
                    Container(
                      height: 50.0,
                      width: MediaQuery.of(context).size.width*.5,
                      color: Colors.transparent,
                      child: new Container(

                          decoration: new BoxDecoration(
                              gradient: LinearGradient(
                                // Where the linear gradient begins and ends
                                begin: Alignment.topRight,
                                end: Alignment.bottomLeft,
                                // Add one stop for each color. Stops should increase from 0 to 1
                                stops: [0.1, 0.5, 0.7, 0.9],
                                colors: [
                                  // Colors are easy thanks to Flutter's Colors class.
                                  Colors.pink[800],
                                  Colors.pink[700],
                                  Colors.red[600],
                                  Colors.red[400],
                                ],
                              ),
                              color: Colors.redAccent[100],
                              borderRadius: new BorderRadius.only(
                                  topLeft: const Radius.circular(40.0),
                                  bottomLeft: const Radius.circular(40.0),
                                  bottomRight: const Radius.circular(40.0),
                                  topRight: const Radius.circular(40.0))),
                          child: new Center(
                            child: new Text("ALL",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
                          )),
                    ),

                  ],
                ),
               ListView.builder(
                   scrollDirection: Axis.vertical,
                   shrinkWrap: true,
                   itemCount: 2,
                   itemBuilder: (context,index){
                     return Text("my widget card will add here");
                   })

              ],
            ),

          ),
        ),
      ],
    );
  }
}

标签： flutterflutter-layout

解决方案

您需要将您的小部件包装ListView.builder在一个Positioned小部件中并为其提供所有参数。

例子：

Positioned(
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          child: ListView(),
        ),

这将占用Stack父级的完整大小。

更新：

你也可以使用Positioned.fill()which 来做同样的事情。

推荐阅读