Question

我需要设计

这是我的代码结果

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

我需要垂直列表而不是水平
ListView.builder（ scrollDirection：Axis.vertical，收缩包裹：是的， itemCount：12 itemBuilder ：（上下文，索引）{ 返回文本（“我的小部件卡将在此处添加”）； }）

这是我的代码

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");
                   })

              ],
            ),

          ),
        ),
      ],
    );
  }
}

Answer 1

您必须将listview包装在容器或sizebox中。

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

如果该列表仍然没有出现，请尝试在容器上输入height和width。

Answer 2

您需要为水平滚动小部件定义固定高度。请尝试用定义高度的容器或大小合适的包装盒包装列表视图。

 Container(
  height: MediaQuery.of(context).size.height*0.3,
  // height: 50,
      child: ListView.builder(
                 scrollDirection: Axis.horizontal,
                 shrinkWrap: true,
                 itemCount: 12,
                 itemBuilder: (context,index){
                   return Text("my widget card will add here");
                 }),
)

Answer 3

首先，您确实需要优化窗口小部件。你可以有轻松实现了设计。

现在，您在当前的小部件设计模式上犯了一个小错误。您需要将Stack()包装在Column()下，并将ListView()从Stack()中移出，并将其作为Column()的第二个子元素，它应该可以工作。

完整源代码：

Column(children: <Widget>[
          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: 95,
              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(
              primary: false,
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: 2,
              itemBuilder: (context, index) {
                return Text("my widget card will add here");
              })
        ])

Answer 4

可以用容器包装列表视图，但也可以添加宽度和边距：在调用图像和图像描述数据的小部件之前，EdgeInsects.only（left：10.0）。

Answer 5

是的，我也是面临此问题的人！将Expanded()用作Stack()每个孩子的父母。

Answer 6

在您的 ListView.Builder 小部件中添加以下参数

ListView.builder(
            physics: ScrollPhysics(), //add this line

)

堆栈小部件内的Listview无法正常工作（scrollDirection：Axis.vertical）

6 个答案: