Flutter Slidable - 如何设置滑动高度

问题描述 投票:0回答:1

我正在开发 Flutter 应用程序,并添加了 Slidable,这对我来说效果很好。 我唯一的问题是它的高度。我无法将可滑动的高度设置为与我的卡相同,发送下面的图像。我需要红色部分与我的白卡高度相同。我尝试增加卡片的大小,但它也增加了可滑动的大小。

这是我的代码:

return Scaffold(
      extendBody: true,
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        centerTitle: false,
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Transform(
          transform: Matrix4.translationValues(-40.0, 0.0, 0.0),
          child: Text(
            AppLocalizations.of(context)!.homeScreenHeading,
            style: const TextStyle(
                fontSize: 34.0,
                fontWeight: FontWeight.w700,
                color: Colors.white),
          ),
        ),
        titleSpacing: 0,
        leading: Container(),
        actions: [
          ClipOval(
            child: Container(
                width: 41.0,
                height: 41.0,
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Color.fromRGBO(163, 167, 180, 1),
                      Color.fromRGBO(138, 142, 152, 1),
                    ],
                  ),
                ),
                child: GestureDetector(
                    onTap: () => {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => ProfileScreen(
                                  userInitials: widget.userInitials,
                                  name: widget.name,
                                  surname: widget.surname),
                              fullscreenDialog: false,
                            ),
                          ),
                        },
                    child: Stack(
                      children: [
                        CircleAvatar(
                          radius: 30.0,
                          backgroundColor: Colors.grey[400],
                          foregroundColor: Colors.white,
                          child: Text(
                            widget.userInitials,
                            style: const TextStyle(
                                fontSize: 17,
                                fontWeight: FontWeight.w700,
                                color: Color.fromRGBO(255, 255, 255, 1)),
                          ),
                        ),
                        if (widget.isPhoto)
                          ClipOval(
                            child: Image.network(
                              widget.imageUrl.toString(),
                              fit: BoxFit.cover,
                              width: 60,
                              height: 60,
                            ),
                          ),
                      ],
                    ))),
          ),
          const SizedBox(width: 20),
        ],
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(120.0),
          child: Padding(
            padding: const EdgeInsets.fromLTRB(12.0, 0.0, 12.0, 12.0),
            child: isEmpty
                ? Center(
                    child: Text(
                      randomQuote,
                      style: const TextStyle(
                          fontSize: 15.0,
                          fontWeight: FontWeight.w500,
                          color: Color.fromRGBO(235, 235, 245, 0.6)),
                      textAlign: TextAlign.center,
                    ),
                  )
                : TextField(
                    style: const TextStyle(
                        color: Color.fromRGBO(235, 235, 245, 0.6),
                        fontSize: 17.0,
                        fontWeight: FontWeight.w500),
                    decoration: InputDecoration(
                      hintText:
                          AppLocalizations.of(context)!.homeScreenSearchLabel,
                      hintStyle: const TextStyle(
                          color: Color.fromRGBO(235, 235, 245, 0.6),
                          fontWeight: FontWeight.w500,
                          fontSize: 17.0),
                      prefixIcon: const Icon(
                        Icons.search,
                        color: Color.fromRGBO(235, 235, 245, 0.6),
                      ),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10),
                        borderSide: BorderSide.none,
                      ),
                      contentPadding: EdgeInsets.zero,
                      filled: true,
                      fillColor: const Color.fromRGBO(32, 32, 32, 0.2),
                    ),
                  ),
          ),
        ),
      ),
      body: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(backgroundImage),
                fit: BoxFit.cover,
              ),
            ),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
              child: Container(
                color: Colors.black.withOpacity(0.3),
              ),
            ),
          ),
          Padding(
              padding: const EdgeInsets.symmetric(horizontal: 6.0),
              child: Column(
                children: <Widget>[
                  Flexible(
                      child: Column(
                    children: [
                      Expanded(
                        child: ListView.builder(
                          itemCount: notes.length,
                          itemBuilder: (context, index) {
                            final note = notes[index];
                            return Slidable(
                              endActionPane: ActionPane(
                                extentRatio: 0.35,
                                
                                motion: const ScrollMotion(),
                                children: [
                                  SlidableAction(
                                    onPressed: (BuildContext context) {
                                      showDialog(
                                        context: context,
                                        builder: (BuildContext context) {
                                          return DeleteConfirmationDialog(
                                              noteId: note.id);
                                        },
                                      ).then((result) {
                                        if (result == 'OK') {
                                          _deleteNote(note.id);
                                        }
                                      });
                                    },
                                    borderRadius: BorderRadius.circular(12),
                                    backgroundColor: Colors.red,
                                    foregroundColor: Colors.white,
                                    icon: Icons.delete_outline,
                                    label: 'Vymazať',
                                  ),
                                ],
                              ),
                              child: HomeCard(
                                note: note,
                                onTap: () => _navigateAndUpdateNote(note),
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  )),
                ],
              )),
        ],
      ),
    );

Current state

flutter
1个回答
0
投票
Slidable(
  endActionPane: ActionPane(
    extentRatio: 0.2,// add as per your need.
    motion: const ScrollMotion(),
    children: [
      SlidableAction(
        borderRadius: BorderRadius.circular(12),
        backgroundColor: Colors.red,
        foregroundColor: Colors.white,
        icon: Icons.delete_outline,
        label: 'Delete',
      ),
    ],
  ),
  child: HomeCard(
    note: note,
    onTap: () => _navigateAndUpdateNote(note),
  ),
);
© www.soinside.com 2019 - 2024. All rights reserved.