flutter - 如何使我的可滑动容器与我的列表项中的容器高度相同？

Question

我在我的应用程序中使用 Flutter 可滑动包。我发现我在 Slidable Widget 的 secondaryAction 列表中使用的 Container 与列表项的高度不同。为了更好地理解是应用程序的两个图像。滑动列表项之前和滑动之后。

请问我怎样才能使黑色的容器与绿色的容器高度相同。

下面是flutter中列表设计实现的代码。

列表项设计代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
// import 'meal_model.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class MealWidget extends StatelessWidget {
  final Widget image;
  final String title, subtitle, price;

  MealWidget(
      {required this.image,
      required this.title,
      required this.subtitle,
      required this.price});

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    double height = size.height;
    double width = size.width;
    double height2 = height * 0.17;
    return Slidable(
      actionPane: SlidableDrawerActionPane(),
      actionExtentRatio: 0.25,
      secondaryActions: <Widget>[

        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10),
          child: Container(
            margin: EdgeInsets.only(top: 0),
            height: height * 0.17,
            width: width * 0.3,
            child: Container(
              height: height2 * 0.02,
              width: height2 * 0.02,
              decoration: BoxDecoration(
                  color: Color(0xFFF54749), shape: BoxShape.circle),
            ),
            decoration: BoxDecoration(
                color: Color(0xFF100B18),
                borderRadius: BorderRadius.circular(20)),
          ),
        ),
      ],
      child: Container(
        height: height2,
        width: width,
        margin: EdgeInsets.only(bottom: 30),
        decoration: BoxDecoration(
            color: Colors.green, borderRadius: BorderRadius.circular(20)),
        child: Row(
          children: [
            ClipPath(
              clipper: BackgroundClipper(),
              child: Container(
                height: height * 0.17,
                width: width * 0.5,
                decoration: BoxDecoration(color: Colors.white),
                child: image,
              ),
            ),
            Expanded(
              child: Container(
                padding: EdgeInsets.only(right: 10, top: 15, bottom: 15),
                width: width * 0.5,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(title,
                        style: TextStyle(
                            fontSize: 26,
                            fontFamily: 'Fira',
                            fontWeight: FontWeight.w600)),
                    Text(subtitle,
                        style: TextStyle(
                            fontSize: 18,
                            fontFamily: 'Fira',
                            fontWeight: FontWeight.w500)),
                    Text(price,
                        style: TextStyle(
                            fontSize: 22,
                            fontFamily: 'Fira',
                            fontWeight: FontWeight.bold))
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class BackgroundClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var roundnessFactor = 20.0;
    var path = Path();
    path.moveTo(0, 20);
    path.lineTo(0, size.height - roundnessFactor);
    path.quadraticBezierTo(0, size.height, roundnessFactor, size.height);
    path.lineTo(size.width - roundnessFactor, size.height);
    path.quadraticBezierTo(
        size.width, size.height, size.width, size.height - roundnessFactor);
    path.lineTo(size.width * 0.8, 10);
    path.quadraticBezierTo(size.width * 0.78, 0, size.width * 0.75, 0);
    path.lineTo(roundnessFactor, 0);
    path.quadraticBezierTo(0, 0, 0, roundnessFactor);

    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}

在 ListView 中实现列表项的代码

import 'package:clip/profile_image.dart';
import 'package:flutter/material.dart';
import 'meal.dart';
import 'meal_model.dart';
import 'dropdown.dart';


class MenuPage extends StatefulWidget {
  const MenuPage({Key? key}) : super(key: key);

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

class _MenuPageState extends State<MenuPage> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    double height = size.height;
    double width = size.width;
    return GestureDetector(
      onTap: () {
        FocusNode isCurrentFocusNode = FocusScope.of(context);
        if (!isCurrentFocusNode.hasPrimaryFocus) {
          isCurrentFocusNode.unfocus();
        }
      },
      child: Scaffold(
        backgroundColor: Color(0xFFF7F7F7),
        appBar: AppBar(
          toolbarHeight: height * 0.09,
          backgroundColor: Colors.white,
          elevation: 0,
          title: Center(child: LocationDropdown()),
          actions: [
            ProfileImage(),
            SizedBox(
              width: width * 0.05,
            ),
          ],
          iconTheme: IconThemeData(color: Colors.black),
        ),
        drawer: Drawer(),
        body: Container(
          padding: EdgeInsets.symmetric(
              vertical: height * 0.02, horizontal: width * 0.05),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Hello, Jenny',
                style: TextStyle(fontSize: 32),
              ),
              RichText(
                  text: TextSpan(
                      text: 'Best Food for ',
                      style: TextStyle(
                          fontSize: 36,
                          color: Colors.black,
                          fontWeight: FontWeight.bold),
                      children: [
                    TextSpan(
                        text: 'you', style: TextStyle(color: Color(0xFFF54749)))
                  ])),
              SizedBox(
                height: height * 0.04,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Material(
                    elevation: 1,
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white,
                      ),
                      width: width * 0.7,
                      height: height * 0.05,
                      child: TextField(
                        decoration: InputDecoration(
                            prefixIcon: Icon(Icons.search),
                            labelText: 'Search',
                            labelStyle: TextStyle(fontSize: 22),
                            border: OutlineInputBorder(
                                borderSide: BorderSide.none)),
                      ),
                    ),
                  ),
                  Material(
                    elevation: 1,
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      width: width * 0.12,
                      height: height * 0.05,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                          'images/filter.png',
                        )),
                        borderRadius: BorderRadius.circular(10),
                        color: Color(0xFFF54749),
                      ),
                    ),
                  )
                ],
              ),
              SizedBox(
                height: height * 0.05,
              ),
              Container(
                height: height * 0.06,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: meals.length,
                    itemBuilder: (BuildContext context, int index) =>
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              selectedIndex = index;
                            });
                          },
                          child: Container(
                              margin: EdgeInsets.only(right: 15),
                              height: height * 0.06,
                              padding: EdgeInsets.symmetric(horizontal: 20),
                              decoration: BoxDecoration(
                                  color: selectedIndex == index
                                      ? Color(0xFFF54749)
                                      : Color(0xFFEBEBEB),
                                  borderRadius: BorderRadius.circular(10)),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceAround,
                                children: [
                                  Container(
                                    height: height * 0.03,
                                    width: height * 0.03,
                                    child: meals[index].mealIcon,
                                  ),
                                  SizedBox(
                                    width: width * 0.03,
                                  ),
                                  Text(
                                    meals[index].mealCategory,
                                    style: TextStyle(
                                        fontSize: 22,
                                        fontWeight: selectedIndex == index
                                            ? FontWeight.bold
                                            : null,
                                        color: selectedIndex == index
                                            ? Colors.white
                                            : null),
                                  )
                                ],
                              )),
                        )),
              ),
              SizedBox(
                height: height * 0.05,
              ),
              Expanded(
                child: ListView.builder(
                    physics: BouncingScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: meal.length,
                    itemBuilder: (context, index) => MealWidget(
                      image: meal[index].mealImage,
                      title: meal[index].mealName,
                      subtitle: meal[index].mealType,
                      price: meal[index].mealAmount,
                    )),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

标签： flutterflutter-dependenciesflutter-animation