flutter 自定义SliverAppBar标题|扑动

tyg4sfes 于 2022-11-25 发布在 Flutter

关注(0)|答案(1)|浏览(201)

第一张图是我拥有，第二张图是我想要，
我尝试使用定位小工具。但是，它不工作。并使用填充它也不工作。

x1c 0d1x的第一个字符

这里有我的代码：
导入“ Package ：flutter/材料. dart”;
类ChatScreen扩展了状态控件{ const ChatScreen（{super.key}）;
=〉_聊天屏幕状态（）;}

class _ChatScreenState extends State<ChatScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
              title: SafeArea(
                child: const CircleAvatar(
                  backgroundColor: Color.fromRGBO(31, 27, 36, 1),
                  radius: 38,
                  child: CircleAvatar(
                    backgroundImage: NetworkImage(
                        'abc.com/286.png'),
                    radius: 35,
                  ),
                ),
              ),
              centerTitle: true,
              background: Image.network(
                "abc.com/a.jpg", 
                fit: BoxFit.fill,
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Column(children: [
              Container(
                height: 250,
                color: Colors.red,
              ),
            ]),
          )
        ],
      ),
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/74558988/customize-sliverappbar-title-flutter

1条答案

按热度按时间

2lpgd9681#

请尝试以下代码：

return Scaffold(
   body: CustomScrollView(
    slivers: [
        SliverAppBar(
            backgroundColor: Colors.transparent,
            pinned: true,
            expandedHeight: 200,
            flexibleSpace: Stack(
                children: <Widget>[
                    Positioned(
                        top: 0,
                        bottom: 25,
                        left: 0,
                        right: 0,
                        child: Image.network(
                            "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                            fit: BoxFit.cover,
                        ),
                    ),
                    Positioned(
                        child: Align(
                          alignment: Alignment.bottomCenter,
                          child: SafeArea(
                            child: CircleAvatar(
                              backgroundColor: Color.fromRGBO(31, 27, 36, 1),
                              radius: 45,
                              child: CircleAvatar(
                                backgroundImage: Image.asset('graphics/Contact.png').image,
                                radius: 42,
                              ),
                            ),
                          )
                        ),
                    ),
                ],
            ),
        ),
        SliverToBoxAdapter(
          child: Column(children: [
            Container(
              height: 750,
              color: Colors.red,
            ),
          ]),
        ),
    ],
  ),
);

并发挥它，找出你正在寻找什么。希望它有帮助：D

赞(0）回复(0）举报 2022-11-25

我来回答

flutter 自定义SliverAppBar标题|扑动

x1c 0d1x的第一个字符

1条答案

相关问题

热门标签

最新问答