如何将Flutter的PageView放入Column或Row中?当我这样做时,会出现以下错误。

30
这是错误信息:
I/flutter (  736): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY  ╞═════════════════════════════════════════════════════════
I/flutter (  736): The following assertion was thrown during performResize():
I/flutter (  736): Horizontal viewport was given unbounded height.
I/flutter (  736): Viewports expand in the cross axis to fill their container and constrain their children to match
I/flutter (  736): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
I/flutter (  736): vertical space in which to expand.

这是代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'PayMart',
      theme: new ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in IntelliJ). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primaryColor: Colors.blue,
        primaryColorDark:Colors.blueAccent ,
        accentColor: Colors.blue,
      ),
      home: new MyTabs(),
    );
  }
}

class MyTabs extends StatefulWidget{

  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {
  int _index;
  PageController _pageController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _index = 0;
    _pageController = new PageController(initialPage: 0,viewportFraction: 1.0);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("PayMart"),
        actions: <Widget>[
          new FlatButton(onPressed: null, child: new Text("R247.50",style: new TextStyle(color: Colors.white,decorationStyle: TextDecorationStyle.wavy),)),
          //new IconButton(icon: new Icon(null, color: Colors.white), onPressed: null),
         new IconButton(icon: new Icon(Icons.add_circle_outline,color: Colors.white), onPressed: null)
        ],
        centerTitle: false,
      ),


      drawer: new Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the Drawer if there isn't enough vertical
        // space to fit everything.
        child: new ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            new DrawerHeader(
              child: new Text('Drawer Header'),
              decoration: new BoxDecoration(
                color: Colors.blue,
              ),
            ),
            new ListTile(
              title: new Text('Item 1'),
              leading: new Icon(Icons.language),
              onTap: () {
                // Update the state of the app
                // ...
              },
            ),
            new ListTile(
              title: new Text('Item 2'),
              onTap: () {
                // Update the state of the app
                // ...
              },
            ),
          ],
        ),
      ),


      body: new Column(children: <Widget>[
     new PageView(children: <Widget>[
       new Container(child:
          new GridView.count(
                children: <Widget>[
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person,color: Colors.deepOrangeAccent,),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person,color: Colors.tealAccent,),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person,color: Colors.deepOrange,),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person),
                        new Text("Hello"),
                      ],
                      )
                  ),
                ],
                crossAxisCount: 4,
                childAspectRatio: 1.5,
                padding: const EdgeInsets.all(4.0),
                mainAxisSpacing: 0.0,
                crossAxisSpacing: 4.0,
                shrinkWrap: true,
              )
       ),
        new Container(color: Colors.brown,),
        new Container(color: Colors.amber,),
        new Container(color: Colors.deepOrangeAccent,),
        new Container(color: Colors.purpleAccent,)
      ],
        controller: _pageController,
      ),
    ]),

      bottomNavigationBar: new Stack(
        children: <Widget>[
          new Positioned(child: new BottomNavigationBar(
          fixedColor: Colors.blueAccent,
          type: BottomNavigationBarType.fixed,
          currentIndex: _index,
          onTap: (int _index) {
          setState(() {
          this._index = _index;
          _pageController.animateToPage(_index,
              duration: new Duration(milliseconds: 300),
              curve: Curves.easeIn);
          });
          },
          items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text("Home")),
          new BottomNavigationBarItem(icon: new Icon(Icons.access_alarm), title: new Text("Transactions")),
    new BottomNavigationBarItem(icon: new Icon(Icons.play_arrow), title: new Text("Pay")),
    new BottomNavigationBarItem(icon: new Icon(Icons.language), title: new Text("Requests")),
    new BottomNavigationBarItem(icon: new Icon(Icons.account_balance_wallet), title: new Text("Wallet"))
    ],
    ),),
          new Positioned.directional(
            child: new FloatingActionButton(
                onPressed: null,
              child:new Icon(Icons.filter_center_focus,size: 24.0,),
              mini: false,
            ),
            textDirection: TextDirection.ltr,
            bottom: 0.0,
          ),
          new Positioned.directional(
              textDirection: TextDirection.ltr,
              child: new Text("scan",style: new TextStyle(color: Colors.white,fontSize: 12.0),),
            bottom: 6.0,
          )
      ],
      alignment: Alignment.bottomCenter,
      )

    );
  }
}

1
你能提供更多有关你的问题的细节吗? - user9405863
2
这不像是Java...它是什么语言?请提供正确的标签。 - Jim Garrison
1
尝试移除以下参数:crossAxisCount: 4, childAspectRatio: 1.5, padding: const EdgeInsets.all(4.0), mainAxisSpacing: 0.0, crossAxisSpacing: 4.0, shrinkWrap: true, 看起来它们没有正确计算大小。 - betorcs
1
看起来你可能进入了 https://github.com/flutter/flutter/issues/11273 - ryanafrish7
4个回答

55

针对您的情况,我建议简单地去掉包裹单个子小部件的Column

无论如何,在不触及外层的Column的情况下,您可以用ExpandedFlexible小部件将您的PageView包围起来。因为PageView的高度是未知的,它的高度取决于其子项。因此,它不能放置在Column中,除非将其包装在上述任一小部件之一中。


它还可以使用高度约束包装在小部件中。所以,是的,在不使用这两个约束的情况下,它可以放在"Column"中!例如,可以使用具有"BoxConstraints"的"Container"。然而,这可能不适合此处的用例。但我认为这一点很重要要提及。 - Marwin Lebensky

10
我建议您这样做:如果剩余的子元素没有使用高 flex 值的 Expanded/Flexible 包裹,则使用 PageView 和 Expanded 会占用尽可能多的空间。
   Column(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: PageView(children: <Widget>[
            Text('Page 1'),
            Text('Page 2'),
            Text('Page 3'),
          ]),
        ),
        Expanded(child: Text("Test"), flex: 10), #<- add this if you don't want it to be at the bottom of the page
      ]),

1

补充NiklasPor的答案,如果你想控制页面视图的大小,请使用SizedBox()。


0

是的,答案已经给出了,所以如果您需要制作页脚,也可以使用Stack。就像在我的情况下,我有一个标题,一个正文,然后在末尾有一个页脚..

Scaffold(
    backgroundColor: PrimaryColor,
    body: Stack(
      children: <Widget>[
        PageView(
          controller: controller,
          children: <Widget>[
           "Your body widgets"
          ],
        ),
        Container(
          alignment: Alignment.bottomCenter,
          child: "Your widget"
        )
      ],
    ));

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接