flutter - 如何在颤动中从另一个自定义小部件分配小部件子（容器）的高度和宽度

Question

我想更改自定义小部件 forProducts 内的容器小部件的宽度和高度，并且我想从另一个自定义 ProductContainer 小部件传递该宽度和高度，但是当我在 ProductContainer 中传递它时，它给出了未定义的名称高度和宽度。

这是我的代码，感谢您的帮助，谢谢，

import 'package:myEcomm/screens/info_page.dart';
import 'package:flutter/material.dart';

class ProductContainer extends StatefulWidget {
  final List products;
  final double height;
  final double width;
  const ProductContainer({
    Key key,
    this.products,
    this.height,
    this.width,
  }) : super(key: key);
  @override
  _ProductContainerState createState() => _ProductContainerState();
}

class _ProductContainerState extends State<ProductContainer> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: 150,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: widget.products.length,
              itemBuilder: (context, index) {
                return forProducts(
                    image: widget.products[index]['imageLink'],
                    tag: widget.products[index]['tag'],
                    name: widget.products[index]['name'],
                    category: widget.products[index]["category"],
                    price: widget.products[index]["price"],
                    context: context);
              },
            ),
          ),
        ],
      ),
    );
  }
}

Widget forProducts(
    {String image = "images/",
    @required String tag,
    @required String name,
    @required String category,
    @required String price,
    @required BuildContext context}) {
  return Column(children: [
    Material(
        child: Hero(
            tag: tag,
            child: GestureDetector(
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => InfoPage(
                              image: image,
                              tag: tag,
                              name: name,
                              category: category,
                              price: price,
                            )));
              },
              child: Container(
                padding: EdgeInsets.all(2),
                margin: EdgeInsets.all(5),
                height:
                    height, // this is the height which I want to assign from productcontainer(height: anyValue) widget
                width:
                    width, // this is the width which I want to assign from productcontainer(width: anyValue) widget
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  image: DecorationImage(
                      fit: BoxFit.cover, image: AssetImage(image)),
                ),
              ),
            ))),
    Text(name),
  ]);
}

标签： flutterdartwidgetflutter-layout

Answer 1

这对我有用

import 'package:myEcomm/screens/info_page.dart';
import 'package:flutter/material.dart';

class ProductContainer extends StatefulWidget {
  final List products;
  final double height;
  final double width;
  const ProductContainer({
    Key key,
    this.products,
    this.height,
    this.width,
  }) : super(key: key);
  @override
  _ProductContainerState createState() => _ProductContainerState();
}

class _ProductContainerState extends State<ProductContainer> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: 150,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: widget.products.length,
              itemBuilder: (context, index) {
                return forProducts(
                height: widget.height,
                width: widget.width,
                    image: widget.products[index]['imageLink'],
                    tag: widget.products[index]['tag'],
                    name: widget.products[index]['name'],
                    category: widget.products[index]["category"],
                    price: widget.products[index]["price"],
                    context: context);
              },
            ),
          ),
        ],
      ),
    );
  }
}

Widget forProducts(
    {String image = "images/",
    @required String tag,
    @required String name,
    @required String category,
    @required String price,
    @required double height,
    @required double width,
    @required BuildContext context}) {
  return Column(children: [
    Material(
        child: Hero(
            tag: tag,
            child: GestureDetector(
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => InfoPage(
                              image: image,
                              tag: tag,
                              name: name,
                              category: category,
                              price: price,
                            )));
              },
              child: Container(
                padding: EdgeInsets.all(2),
                margin: EdgeInsets.all(5),
                height: height,
                width: width,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  image: DecorationImage(
                      fit: BoxFit.cover, image: AssetImage(image)),
                ),
              ),
            ))),
    Text(name),
  ]);
}