【问题标题】:Disable shrink effect of FlexibleSpaceBar's title禁用 FlexibleSpaceBar 标题的收缩效果
【发布时间】:2022-12-17 19:44:14
【问题描述】:

请看: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的解决方案(Prevent SliverAppBar title from wrapping while it shrinks in Flutter)但是没有用,有没有人有解决这个问题的方法,谢谢!!!

【问题讨论】:

    标签: flutter flutter-layout flutter-animation


    【解决方案1】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-03-14
      • 1970-01-01
      • 2019-03-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-04-14
      • 1970-01-01
      相关资源
      最近更新 更多