Question

如何包装PageView的内容，以便指示符出现在PageView结束的正下方？现在，PageView填满整个屏幕，指标位于屏幕底部。下面是如何创建PageView中的每个子节点。在每个孩子中，我有一个默认高度为200的Image和maxLines为2的TextView。虽然PageView中每个孩子的实际身高是设备屏幕的一半，但它会填满整个屏幕。

final List<Widget> _pages = <Widget>[
new Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    new Image.network(
      'imageurl',
      height: 200.0,
      fit: BoxFit.fitWidth,
    ),
    new Padding(
      padding: EdgeInsets.all(20.0),
      child: new Text(
        "Order from wide range of restaurants",
        maxLines: 2,
        style: new TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
        textAlign: TextAlign.center,
      ),
    )
  ],
),
new Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    new Image.network(
      'imageurl',
      height: 200.0,
      fit: BoxFit.fitWidth,
    ),
    new Padding(
      padding: EdgeInsets.all(20.0),
      child: new Text(
        "Order from wide range of restaurants",
        maxLines: 2,
        style: new TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
        textAlign: TextAlign.center,
      ),
    ),
  ],
),
new Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    new Image.network(
      'imageurl',
      height: 200.0,
      fit: BoxFit.fitWidth,
    ),
    new Padding(
      padding: EdgeInsets.all(20.0),
      child: new Text(
        "Order from wide range of restaurants",
        maxLines: 2,
        style: new TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
        textAlign: TextAlign.center,
      ),
    )
  ],
)
];

有状态窗口小部件的构建器方法

Widget build(BuildContext context) {
return new Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    new Flexible(
      child: new PageView.builder(
        physics: new AlwaysScrollableScrollPhysics(),
        controller: _controller,
        itemCount: _pages.length,
        itemBuilder: (BuildContext context, int index) {
          return _pages[index % _pages.length];
        },
      ),
      fit: FlexFit.loose,
    ),
    new Container(
      color: Colors.black,
      padding: const EdgeInsets.all(20.0),
      child: new Center(
        child: new DotsIndicator(
          controller: _controller,
          itemCount: _pages.length,
          onPageSelected: (int page) {
            _controller.animateToPage(
              page,
              duration: _kDuration,
              curve: _kCurve,
            );
          },
        ),
      ),
    )
  ],
);
}

Answer 1

这是我的解决方案，因为你没有粘贴整个源代码，我省略了点部分

    import 'package:flutter/material.dart';

    class PageViewIssue extends StatefulWidget {
      PageViewIssue({Key key, this.title}) : super(key: key);

      static const String routeName = "/PageViewIssue";

      final String title;

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

    class _PageViewIssueState extends State<PageViewIssue> {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: _getBodyContent(),
          floatingActionButton: new FloatingActionButton(
            onPressed: _onFloatingActionButtonPressed,
            tooltip: 'Add',
            child: new Icon(Icons.add),
          ),
        );
      }

      void _onFloatingActionButtonPressed() {}

      List<Widget> _getPageViews() {
        final String imgUrl =
            "https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&h=320&w=320";
        final List<Widget> _pages = <Widget>[
          new Center(
              child: new Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Center(
                  child: new Image.network(
                imgUrl,
                height: 200.0,
                fit: BoxFit.fitWidth,
              )),
              new Padding(
                padding: EdgeInsets.all(20.0),
                child: new Text(
                  "Order from wide range of restaurants",
                  maxLines: 2,
                  style: new TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
                  textAlign: TextAlign.center,
                ),
              )
            ],
          )),
          new Center(
              child: new Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Center(
                  child: new Image.network(
                imgUrl,
                height: 200.0,
                fit: BoxFit.fitWidth,
              )),
              new Padding(
                padding: EdgeInsets.all(20.0),
                child: new Text(
                  "Order from wide range of restaurants",
                  maxLines: 2,
                  style: new TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          )),
          new Center(
              child: new Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Center(
                  child: new Image.network(
                imgUrl,
                height: 200.0,
                fit: BoxFit.fitWidth,
              )),
              new Padding(
                padding: EdgeInsets.all(20.0),
                child: new Text(
                  "Order from wide range of restaurants",
                  maxLines: 2,
                  style: new TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
                  textAlign: TextAlign.center,
                ),
              )
            ],
          ))
        ];

        return _pages;
      }

      Widget _getBodyContent() {
    var controller = new PageController(initialPage: 0);
    var pageView = new PageView(
        children: _getPageViews(), pageSnapping: true, controller: controller);

    var width = MediaQuery.of(context).size.width;

    var expansion1 = new Expanded(
        child:
            new Container(width: width, child: pageView, color: Colors.green),
        flex: 9);

    var expansion2 = new Expanded(
        child: new Container(
            width: width,
            child: new Center(child: new Text("Text 2")),
            color: Colors.redAccent),
        flex: 1);
    return new Column(children: <Widget>[expansion1, expansion2]);
  }
    }

您要找的是Constrained Box。

如何包装PageView的内容，以便指示符出现在PageView结束的正下方？

1 个答案: