[英]out border color Flutter
I'm facing the next problem, I have elements in Stack
and I want iPhone users see purple color when they scroll up and white when they scroll down我面临下一个问题,我在Stack
中有元素,我希望 iPhone 用户在向上滚动时看到紫色,在向下滚动时看到白色
I have the next structure:我有下一个结构:
Widget build(BuildContext context) {
return Scaffold(
body: WillPopScope(
child: ListView(
children: [
Container(
child: Stack(
children: [
...
],
),
),
],
),
),
);
If I change Scaffold color directly it will change both sides, top and bottom.如果我直接改变脚手架的颜色,它会改变两侧,顶部和底部。 I want top one to be purple and bottom to be white我希望顶部是紫色,底部是白色
By using SliverAppBar, I implemented what you want.通过使用 SliverAppBar,我实现了你想要的。
I wonder this is perfect solution for what you want.我想知道这是您想要的完美解决方案。
You need to implement top layout(title, lead button, image...)您需要实现顶部布局(标题、引导按钮、图像...)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
}
List<Widget> bodyItems = [
SizedBox(height: 50),
Text(
'NMR',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
),
),
SizedBox(height: 50),
Text(
'+00 000 000 00 00',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
),
),
SizedBox(height: 50),
Text(
'Text Text Text',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 100),
child: LinearProgressIndicator(
value: 50,
semanticsLabel: 'Linear progress indicator',
),
),
Text(
'Text Text Text',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
),
),
SizedBox(height: 50),
Padding(
padding: EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Text Text Text',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
),
),
Text(
'Text Text Text',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
),
),
],
),
),
SizedBox(height: 400),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.yellow,
body: CustomScrollView(
physics: BouncingScrollPhysics(),
slivers: [
SliverAppBar(
expandedHeight: 250,
collapsedHeight: 250,
stretch: true,
backgroundColor: Color(0XFF7861AA),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(50),
bottomRight: Radius.circular(50),
),
),
flexibleSpace: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
height: 20,
),
Text('Title'),
Icon(
Icons.home,
color: Colors.blue,
size: 160.0,
),
],
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(_, int index) {
return bodyItems[index];
},
childCount: bodyItems.length,
),
),
],
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.