在容器中定位行小部件：Flutter

Question

我想 position 分别位于容器的最右端和最左端的“添加”容器内的+和-图标。 另外，我想将 ' LEFT ' 容器放在图像的左上角。

我尝试在 LEFT 容器中使用Positioned.fill和Align Widget，但它似乎不起作用。

class ImageStack extends StatelessWidget {
  const ImageStack({
    Key key,
    @required this.size,
    @required this.restaurantItems,
    @required this.cart,
    @required this.widget,
  }) : super(key: key);

  final Size size;
  final RestaurantItems restaurantItems;
  final Cart cart;
  final RestaurantItemList widget;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          color: Colors.white,
          height: size.width * 0.30,
          width: size.width * 0.30,
        ),
        ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: Image.network(
            restaurantItems.imageUrl,
            height: size.width * 0.28,
            width: size.width * 0.28,
            fit: BoxFit.cover,
          ),
        ),
        Positioned.fill(
          bottom: 0.0,
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.green,
              ),
              child: Padding(
                padding: const EdgeInsets.only(
                    left: 19, top: 6, right: 15, bottom: 6),
                child: InkWell(
                  splashColor: Colors.white,
                  onTap: () async {
                    
                    await cart.addItemCart(
                        widget.restaurant.id,
                        restaurantItems.id,
                        restaurantItems.price,
                        restaurantItems.quantity,
                        context);
                  
                  },
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment:
                        MainAxisAlignment.spaceEvenly,
                    children: [
                      Icon(
                        Icons.remove,
                        color: Colors.white,
                        size: 17,
                      ),
                      Text(
                        // ''
                        'ADD',
                        // : '${restaurantItems[i].quantity}',
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 16),
                      ),
                      Padding(
                        padding:
                            const EdgeInsets.only(right: 3),
                        child: Icon(
                          Icons.add,
                          color: Colors.white,
                          size: 17,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
        Positioned.fill(
          child: Align(
            alignment: Alignment.topLeft,
            child: Container(
              margin: EdgeInsets.only(left: 4),
              decoration: BoxDecoration(
                  color: Colors.teal[900],
                  borderRadius: BorderRadius.circular(4)),
              child: Padding(
                padding: const EdgeInsets.all(5),
                child: Text(
                  '${restaurantItems.quantity} LEFT',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      fontFamily: 'Raleway',
                      color: Colors.white,
                      fontWeight: FontWeight.w800,
                      fontSize: 15),
                ),
              ),
            ),
          ),
        )
      ],
    );
  }
}

感谢您的时间和支持。

Answer 1

将Expanded小部件添加到包含+ Add -的行中，并将Text('Add')设置为Expanded的子级，这将使 Text 填充放置+和-元素后剩余的区域。

Expanded(child:Text(
                        // ''
                        'ADD',
                        // : '${restaurantItems[i].quantity}',
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 16),
                      )),

您使用Positioned.fill有什么原因吗？ 由于您没有使用此元素填充显示区域，因此Top和Left设置为 0 的常规Positioned小部件应该会为您提供所需的结果。

Answer 2

尝试这个：

return Stack(
  children: [
    Container(
      color: Colors.white,
      height: size.width * 0.30,
      width: size.width * 0.30,
    ),
    ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: Image.network(
        restaurantItems.imageUrl,
        height: size.width * 0.28,
        width: size.width * 0.28,
        fit: BoxFit.cover,
      ),
    ),
    Positioned.fill(
      bottom: 0.0,
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.green,
          ),
          child: Padding(
            padding: const EdgeInsets.only(
                top: 6, bottom: 6),
            child: InkWell(
              splashColor: Colors.white,
              onTap: () async {
                
                await cart.addItemCart(
                    widget.restaurant.id,
                    restaurantItems.id,
                    restaurantItems.price,
                    restaurantItems.quantity,
                    context);
              
              },
              child: Row(
                mainAxisAlignment:
                    MainAxisAlignment.spaceBetween,
                children: [
                  Icon(
                    Icons.remove,
                    color: Colors.white,
                    size: 17,
                  ),
                  Text(
                    // ''
                    'ADD',
                    // : '${restaurantItems[i].quantity}',
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 16),
                  ),
                  Padding(
                    padding:
                        const EdgeInsets.only(right: 3),
                    child: Icon(
                      Icons.add,
                      color: Colors.white,
                      size: 17,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    ),
    Positioned(
      top: 0.0,
      left: 0.0,
      child: Container(
          margin: EdgeInsets.only(left: 4),
          decoration: BoxDecoration(
              color: Colors.teal[900],
              borderRadius: BorderRadius.circular(4)),
          child: Padding(
            padding: const EdgeInsets.all(5),
            child: Text(
              '${restaurantItems.quantity} LEFT',
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontFamily: 'Raleway',
                  color: Colors.white,
                  fontWeight: FontWeight.w800,
                  fontSize: 15),
            ),
          ),
        ),
    )
  ],
);