如何将 flutter PageView 放入列或行中？当我这样做时，我收到以下错误

Question

这是错误：

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,
      )

    );
  }
}

Answer 1

在您的具体情况下，我只是建议删除包装 Column，因为它只有一个子窗口小部件。

无论如何，要在不触及包装 Column 的情况下解决此问题，您可以用 Expanded or Flexible Widget. The PageView has an unknown height, because the height of it depends on its children. Therefore it can't be placed in a Column 包围您的 PageView 而无需将其包装在上述小部件之一中。

Answer 2

是的，答案已经给你了，所以如果你需要制作页脚，也可以使用Stack。就我而言，我有一个标题，一个 body，最后是一个页脚 ..

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

Answer 3

也建议做这样的事情。如果剩余的 children 没有包含在具有高弹性数字的 Expanded/Flexible 中，则使用 PageView 展开将尽可能多地占用 space。

   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
      ]),

Answer 4

添加到 NiklasPor 答案，如果你想控制页面视图的大小使用 SizedBox()

如何将 flutter PageView 放入列或行中？当我这样做时，我收到以下错误

How do I put a flutter PageView inside a Column or Row? I get the error below when I do

height

viewport

dart

flutter