禁用FlexibleSpaceBar标题的收缩效果

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

请查看:https://im.ge/i/gif.1sFufF

我正在尝试禁用FlexibleSpaceBar标题的收缩效果

这是代码:

 return Scaffold(
      backgroundColor: Colors.white,
      body: DefaultTabController(
        length: 3,
        child: NestedScrollView(
          //physics: const BouncingScrollPhysics(),
          controller: _scrollController,
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                elevation: 0,
                backgroundColor: Colors.white,
                expandedHeight: maxExtent,
                centerTitle: false,
                leading: addLeadingIcon(),
                title: _isSliverAppBarExpanded
                    ? Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'BMW i8',
                            style: TextStyle(color: _textColor),
                          ),
                          Text(
                            'BMW i8',
                            style: TextStyle(color: _textColor, fontSize: 12),
                          ),
                        ],
                      )
                    : null,
                floating: true,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  titlePadding: EdgeInsets.zero,
                  background: Image.network(
                    "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                    fit: BoxFit.cover,
                  ),
                  title: !_isSliverAppBarExpanded ? _floatingCard() : null,
                ),
              ),
              SliverPersistentHeader(
                delegate: _SliverAppBarDelegate(
                  TabBar(
                    padding: EdgeInsets.symmetric(horizontal: 20),
                    labelColor: Colors.black87,
                    unselectedLabelColor: Colors.grey,
                    labelPadding: EdgeInsets.zero,
                    tabs: [
                      Tab(text: "Overview"),
                      Tab(text: "Photos"),
                      Tab(text: "Review"),
                    ],
                  ),
                ),
                pinned: true,
              ),
            ];
          },
          body: Center(
            child: Text("Sample text"),
          ),
        ),
      ),
    );
  }

  _floatingCard() {
    return Stack(
      children: [
        Align(
          alignment: Alignment(0, 1.2),
          child: Container(
            height: 115,
            color: Colors.white,
          ),
        ),
        Align(
          alignment: Alignment(0, 0.85),
          child: Container(
            width: MediaQuery.of(context).size.width * 0.6,
            height: 115,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  blurRadius: 2,
                  offset: Offset(0, 3),
                ),
              ],
            ),
            child: Padding(
              padding: const EdgeInsets.all(10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        "Some car",
                        style: TextStyle(color: Colors.black),
                      ),
                      Row(
                        children: [
                          Icon(Icons.star),
                          Text(
                            "4.7",
                            style: TextStyle(color: Colors.black),
                          )
                        ],
                      )
                    ],
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 10.0),
                    child: Text(
                      "Some seat, some bags",
                      style: TextStyle(color: Colors.black, fontSize: 10),
                    ),
                  ),
                  Row(
                    children: [
                      Expanded(
                        child: _item(isLastItem: false),
                      ),
                      Expanded(
                        child: _item(isLastItem: false),
                      ),
                      Expanded(
                        child: _item(isLastItem: true),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }

我尝试过 FittedBox 解决方案(防止 SliverAppBar 标题在 Flutter 中收缩时换行),但没有成功。

有没有人能解决这个问题?

谢谢!!!

flutter flutter-animation
1个回答
1
投票

您可以在FlexibleSpaceBar中使用“expandedTitleScale: 1”

© www.soinside.com 2019 - 2024. All rights reserved.