Question

更新：当我尝试使用listView时，我总是遇到错误，我需要在3列列上使用3个列表视图，并且每个列都有一个水平可滚动列表视图

 import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget horizontalList1 = new Container(
      margin: EdgeInsets.symmetric(vertical: 20.0),
      child: new ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(width: 130.0, color: Colors.red,),
      ],
    )
    );

    Widget horizontalList2 = new Container(
        margin: EdgeInsets.symmetric(vertical: 20.0),
        child: new ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(width: 130.0, color: Colors.blue,),
      ],
    )
    );
    Widget horizontalList3 = new Container(
        margin: EdgeInsets.symmetric(vertical: 20.0),
        child: new ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(width: 130.0, color: Colors.blue,),
      ],
    )
    );


    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Activity"),
      ),
      body: new Center(
        child: new Container(
          child: ListView(
            scrollDirection: Axis.vertical,
            children: <Widget>[
              horizontalList1,
              horizontalList2,
              horizontalList3,
            ],
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

这几乎应该可以工作，但是我不断收到mediaquery错误，不知道我缺少了什么或导致错误的原因

Answer 1

当您在另一个ListView中使用ListView时，第一个应该具有特定的大小

    import 'package:flutter/material.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
      Widget horizontalList1 = new Container(
        margin: EdgeInsets.symmetric(vertical: 20.0),
        height: 200, //<- Here the height should be specific
        child: new ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 130.0,
            color: Colors.red,
          ),
         ],
       ));

     Widget horizontalList2 = new Container(
        margin: EdgeInsets.symmetric(vertical: 20.0),
        height: 200,//<- Here the height should be specific
        child: new ListView(
           scrollDirection: Axis.horizontal,
           children: <Widget>[
             Container(
               width: 130.0,
               color: Colors.blue,
              ),
          ],
        ));
     Widget horizontalList3 = new Container(
       margin: EdgeInsets.symmetric(vertical: 20.0),
       height: 200,//<- Here the height should be specific
        child: new ListView(
          scrollDirection: Axis.horizontal,
           children: <Widget>[
            Container(
              width: 130.0,
              color: Colors.blue,
             ),
          ],
    ));

 return new Scaffold(
  appBar: new AppBar(
    title: new Text("Activity"),
  ),
  body: new Center(
    child: new Container(
      child: ListView(
        scrollDirection: Axis.vertical,
        children: <Widget>[
          horizontalList1,
          horizontalList2,
          horizontalList3,
        ],
      ),
    ),
  ), // This trailing comma makes auto-formatting nicer for build methods.
);

} }

Answer 2

您的错误显示MediaQuery.of() was called on a context that does not contain a MediaQuery 这是因为您正在为应用程序的父窗口小部件使用Scaffold。但是scaffold应该用于页面而不是应用程序。您应将MaterialApp用于应用程序的父窗口小部件。

@override
  Widget build(BuildContext context) {
      return MaterialApp(
          home:Scaffold(
          //Your code here
          )
      );
  }

在水平方向上滚动创建3行列

2 个答案: