Question

我现在正在尝试实现一种非常常见的行为，即在另一个可滚动的小部件中包含一个水平列表。想一些类似imdb应用程序的主屏幕的事情：

所以我想有一个垂直滚动的小部件，上面没有几个项目。它的顶部应该有一个水平的root@backup-vm:/# gcsfuse --key-file=/root/gcloud-auth.json --foreground --debug_gcs --debug_http --debug_fuse --debug_invariants gs://project-id.appspot.com project-id-gcs Using mount point: /project-id-gcs Opening GCS connection... WARNING: gcsfuse invoked as root. This will cause all files to be owned by root. If this is not what you intended, invoke gcsfuse as the user that will be interacting with the file system. Opening bucket... gcs: Req 0x0: <- ListObjects() http: ========== REQUEST: GET http://www.googleapis.com/storage/v1/b/gs:%2F%2Fproject-id.appspot.com/o?maxResults=1&projection=full HTTP/1.1 Host: www.googleapis.com User-Agent: gcsfuse/0.0 Authorization: Bearer ya29.c.ElqmBlY5_yOiGiAPBW2b9QiF8OJ9eiF6oxf59KU-jmjSd4RLuz0qt9X2DdEPT3fhLxYGs1M-CcXmoCV_pOwR2sa-7yaTGyzDkoXTw1Qdv5tvVwnB0Bw7eXbidh0 Accept-Encoding: gzip http: ========== RESPONSE: HTTP/2.0 404 Not Found Content-Length: 165 Cache-Control: private, max-age=0 Content-Type: application/json; charset=UTF-8 Date: Mon, 04 Feb 2019 07:52:25 GMT Expires: Mon, 04 Feb 2019 07:52:25 GMT Server: UploadServer Vary: Origin Vary: X-Origin X-Guploader-Uploadid: AEnB2Uo3BdH8Hs8w2bf9OdtojD60NtuOCoxHIfJ9lHIiRbJRw93w7xyvD2iufh53Yjo380cQ2HZT0AiImNToZPgBtiEwg--kLfISuUl9XtjBDJFfbId6a2s { "error": { "errors": [ { "domain": "global", "reason": "notFound", "message": "Not Found" } ], "code": 404, "message": "Not Found" } } http: ==================== gcs: Req 0x0: -> ListObjects() (214.981969ms): googleapi: Error 404: Not Found, notFound mountWithArgs: mountWithConn: setUpBucket: OpenBucket: Unknown bucket "gs://project-id.appspot.com"，然后是一些叫做ListView的项目。列表和卡片之间也有一些标题。

我的motivationCard上出现了类似的内容：

Widget

这是我得到的错误：

@override
  Widget build(BuildContext context) => BlocBuilder<HomeEvent, HomeState>(
        bloc: _homeBloc,
        builder: (BuildContext context, HomeState state) => Scaffold(
              appBar: AppBar(),
              body: Column(
                children: <Widget>[
                  Text(
                    Strings.dailyTasks,
                  ),
                  ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: tasks.length,
                    itemBuilder: (BuildContext context, int index) =>
                        taskCard(
                          taskNumber: index + 1,
                          taskTotal: tasks.length,
                          task: tasks[index],
                        ),
                  ),
                  Text(
                    Strings.motivations,
                  ),
                  motivationCard(
                    motivation: Motivation(
                        title: 'Motivation 1',
                        description:
                        'this is a description of the motivation'),
                  ),
                  motivationCard(
                    motivation: Motivation(
                        title: 'Motivation 2',
                        description:
                        'this is a description of the motivation'),
                  ),
                  motivationCard(
                    motivation: Motivation(
                        title: 'Motivation 3',
                        description:
                        'this is a description of the motivation'),
                  ),
                ],
              ),
            ),
      );

我尝试过：

使用I/flutter (23780): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter (23780): The following assertion was thrown during performResize(): I/flutter (23780): Horizontal viewport was given unbounded height. I/flutter (23780): Viewports expand in the cross axis to fill their container and constrain their children to match I/flutter (23780): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of I/flutter (23780): vertical space in which to expand.小部件包装ListView
用Expanded
以SingleChildScrollView > ConstrainedBox > IntrinsicHeight作为父项，其中CustomScrollView和列表位于SliverList

这些工作都没有，我继续遇到同样的错误。这是很常见的事情，应该不难，以某种方式我无法使它起作用：（

任何帮助将不胜感激，谢谢！

编辑：

我认为this可以帮助我，但没有帮助。

Answer 1

截屏：

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 7,
        itemBuilder: (_, i) {
          if (i < 2)
            return _buildBox(color: Colors.blue);
          else if (i == 3)
            return _horizontalListView();
          else
            return _buildBox(color: Colors.blue);
        },
      ),
    );
  }

  Widget _horizontalListView() {
    return SizedBox(
      height: 120,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (_, __) => _buildBox(color: Colors.orange),
      ),
    );
  }

  Widget _buildBox({Color color}) => Container(margin: EdgeInsets.all(12), height: 100, width: 200, color: color);
}

Answer 2

好吧，您的代码可以很好地将{-{1}}与ListView.builder小部件一起包装起来，设置Expanded小部件中的mainAxisSize: MainAxisSize.min,。

您拥有的E.x代码。

Column

更新：

整个页面可通过-body: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Text( 'Headline', style: TextStyle(fontSize: 18), ), Expanded( child: ListView.builder( shrinkWrap: true, scrollDirection: Axis.horizontal, itemCount: 15, itemBuilder: (BuildContext context, int index) => Card( child: Center(child: Text('Dummy Card Text')), ), ), ), Text( 'Demo Headline 2', style: TextStyle(fontSize: 18), ), Expanded( child: ListView.builder( shrinkWrap: true, itemBuilder: (ctx,int){ return Card( child: ListTile( title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')), ); }, ), ), ], ),

滚动

SingleChildScrollView.

Answer 3

我们必须在另一个 SingleScrollView 中使用 SingleScrollView，使用 ListView 需要固定高度

SingleChildScrollView(
   child: Column(
      children: <Widget>[
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
          children: [Text('H1'), Text('H2'), Text('H3')])),
        Text('V1'),
        Text('V2'),
        Text('V3')]))

Answer 4

以这种方式解决水平ListView中的垂直ListView

ListView.builder(
  itemBuilder: (context, index) =>
      Column(children: [
        _userProfileLayout(reviewPage.items[index]),
        Container(
          height: 100,
          child:
          ListView.builder( scrollDirection: Axis.horizontal,
              itemBuilder: (context, index) => Text("dddd")),
        ),
        FadeInImage.assetNetwork(
            placeholder: "images/default_review_img.png",
            image:
            "${reviewPage.items[index].multimedias[0]
                .url}"),
        _placeLayout(reviewPage.items[index])
      ]),
)

你也可以像这样切换到Row内的SingleChildScrollview：

ListView.builder(
  itemCount: 3,
  scrollDirection: Axis.vertical,
  itemBuilder: (context, position) {
    if (position == 0) {
      return Container(
        child: Text("First rwo"),
      );
    } else if (position == 1) {
      return Container(
        child: Text("second  rwo"),
      );
    } else if (position == 2) {
      return SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: [Text("List"), Text("List"), Text("List"), Text("List")],
        ),
      );
    }
  },
)

第二个学分是 Jordan Davies

Flutter中垂直ScrollView内的水平ListView

4 个答案: