gpt4 book ai didi

flutter - 自定义 FlexibleSpaceBar 小部件

转载 作者:行者123 更新时间:2023-12-02 16:32:45 25 4
gpt4 key购买 nike

我希望标题在图片下方,并与图片折叠......

我的收获

enter image description here

home: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(

expandedHeight: 220.0,
floating: true,
pinned: true,
snap: true,
elevation: 50,
backgroundColor: Colors.pink,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text('Title',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Image.network(
'https://images.pexels.com/photos/443356/pexels-photo-443356.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
fit: BoxFit.cover,
)
),
),
new SliverList(
delegate: new SliverChildListDelegate(_buildList(50))
),
],
),

我想要什么

enter image description here

感谢帮助

最佳答案

希望我还不算太晚,我的回答对你有帮助。

enter image description here

如果您检查 flexibleSpace 参数类型,您会注意到它接受任何 Widget

因此您可以创建自己的小部件,并将标题从 SliverAppBar 移动到您的 NewFlexibleSpaceWidget

另外你可以去看看FlexibleSpaceBar ,看看 flutter 开发团队是如何实现的。

当我们收缩或扩展SliverAppBarWidget时,它会改变FlexibleSpaceBoxConstraints,所以这意味着我们可以通过使用LayoutBuilder 将为我们提供当前的 BoxConstraints。我们可以使用它们来绘制动画。

enter image description here

import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SafeArea(
child: MyHomePage(),
),
),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
ScrollController controller = ScrollController();
@override
Widget build(BuildContext context) {
return CustomScrollView(
physics: ClampingScrollPhysics(),
controller: controller,
slivers: [
SliverAppBar(
expandedHeight: 220.0,
floating: true,
pinned: true,
snap: true,
elevation: 50,
backgroundColor: Colors.pink,
leading: IconButton(
icon: Icon(Icons.filter_1),
onPressed: () {},
),
flexibleSpace: _MyAppSpace(),
),
SliverList(
delegate: SliverChildListDelegate(
List.generate(
200,
(index) => Card(
child: Padding(
padding: EdgeInsets.all(10),
child: Text('text $index'),
),
),
),
),
)
],
);
}
}

class _MyAppSpace extends StatelessWidget {
const _MyAppSpace({Key key}) : super(key: key);

@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, c) {
final settings = context
.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();
final deltaExtent = settings.maxExtent - settings.minExtent;
final t =
(1.0 - (settings.currentExtent - settings.minExtent) / deltaExtent)
.clamp(0.0, 1.0) as double;
final fadeStart = math.max(0.0, 1.0 - kToolbarHeight / deltaExtent);
const fadeEnd = 1.0;
final opacity = 1.0 - Interval(fadeStart, fadeEnd).transform(t);

return Opacity(
opacity: opacity,
child: Column(
children: [
Flexible(
child: Container(
width: double.infinity,
child: Image.network(
'https://images.pexels.com/photos/443356/pexels-photo-443356.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Title',
style: TextStyle(
color: Colors.white,
fontSize: 26.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
);
},
);
}
}

关于flutter - 自定义 FlexibleSpaceBar 小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63231817/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com