flutter - 水平视口是无限的

Question

我正在尝试执行浏览量滑动，但上面出现以下错误。请帮我解决这个问题。

错误：

Horizontal viewport was given unbounded height.
Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.

这是我的代码：

import 'dart:io';
import 'package:flutter/material.dart';

class HomeView extends StatefulWidget {
  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {

  List<Coffee> coffeeList = List<Coffee>();
  @override
  void initState() {
    super.initState();
    this.coffeeList.add(new Coffee('../images/cup_of_coffee.png', 'Cappuccino', 'Coffee 1', 329.0));
    this.coffeeList.add(new Coffee('../images/cup_of_coffee.png', 'Caffè Americano', 'Coffee 2', 299.0));
    this.coffeeList.add(new Coffee('../images/cup_of_coffee.png', 'Espresso', 'Lattes', 249.0));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color.fromARGB(1, 237, 231, 230),
      child: Column(
        children: <Widget>[
          Column(
            children: <Widget>[
              Text(
                'Select',
                textAlign: TextAlign.left,
                style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w100),
              ),
              Text(
                'Coffee',
                textAlign: TextAlign.left,
                style: TextStyle(fontSize: 19.0, fontWeight: FontWeight.w600),
              ),
            ],
          ),
          PageView.builder(
            itemCount: 10,
            itemBuilder: (BuildContext context, int index) => _pageItem(coffeeList, index),
          )
        ],
      ),
    );
  }
}

Widget _pageItem(List<Coffee> coffeeList, int index) {
  return Container(
    color: Colors.white,
    width: 200,
    height: 200,
    child: Stack(
      children: <Widget>[
        Container(
          child: Image.asset(coffeeList[index].url),
        ),
        Column(
          children: <Widget>[
            Text(coffeeList[index].category,
                style: TextStyle(
                  fontSize: 12.0,
                  color: Color.fromARGB(1, 237, 231, 230),
                )),
            Text(coffeeList[index].title,
                style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.black,
                    fontWeight: FontWeight.bold)),
          ],
        ),
        Center(
          child: Text(coffeeList[index].price.toString(),
            style: TextStyle(fontWeight: FontWeight.bold),),
        )
      ],
    ),
  );
}

PageController _pageViewController() {}

class Coffee {
  String url, category, title;
  double price;

  Coffee(this.url, this.category, this.title, this.price);
}

标签： flutter

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用Expanded flex提供者height

Expanded(
            flex: 1,
            child: Column(
...         
Expanded(
            flex: 4,
            child: PageView.builder(

工作演示

完整代码

import 'package:flutter/material.dart';
import 'dart:io';

class HomeView extends StatefulWidget {
  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  List<Coffee> coffeeList = List<Coffee>();
  @override
  void initState() {
    super.initState();
    this.coffeeList.add(new Coffee(
        'https://picsum.photos/250?image=9', 'Cappuccino', 'Coffee 1', 329.0));
    this.coffeeList.add(new Coffee('https://picsum.photos/250?image=10',
        'Caffè Americano', 'Coffee 2', 299.0));
    this.coffeeList.add(new Coffee(
        'https://picsum.photos/250?image=11', 'Espresso', 'Lattes', 249.0));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color.fromARGB(1, 237, 231, 230),
      child: Column(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Column(
              children: <Widget>[
                Text(
                  'Select',
                  textAlign: TextAlign.left,
                  style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w100),
                ),
                Text(
                  'Coffee',
                  textAlign: TextAlign.left,
                  style: TextStyle(fontSize: 19.0, fontWeight: FontWeight.w600),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 4,
            child: PageView.builder(
              itemCount: coffeeList.length,
              itemBuilder: (BuildContext context, int index) =>
                  _pageItem(coffeeList, index),
            ),
          )
        ],
      ),
    );
  }
}

Widget _pageItem(List<Coffee> coffeeList, int index) {
  return Container(
    color: Colors.white,
    width: 200,
    height: 200,
    child: Stack(
      children: <Widget>[
        Container(
          child: Image.network(coffeeList[index].url),
        ),
        Column(
          children: <Widget>[
            Text(coffeeList[index].category,
                style: TextStyle(
                  fontSize: 12.0,
                  color: Color.fromARGB(1, 237, 231, 230),
                )),
            Text(coffeeList[index].title,
                style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.black,
                    fontWeight: FontWeight.bold)),
          ],
        ),
        Center(
          child: Text(
            coffeeList[index].price.toString(),
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        )
      ],
    ),
  );
}

PageController _pageViewController() {}

class Coffee {
  String url, category, title;
  double price;

  Coffee(this.url, this.category, this.title, this.price);
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(
        title: "test",
      ),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: HomeView(),
    );
  }
}