请检查我使用的堆栈和定位窗口小部件的图像,但结果没有响应。附加的图像来自两个d/f仿真器。请帮帮忙。
请检查我使用的堆栈和定位窗口小部件的图像,但结果没有响应。附加的图像来自两个d/f仿真器。请帮帮忙
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:imnci/credintials/contact_info.dart';
import 'package:percent_indicator/percent_indicator.dart';
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(244, 245, 249, 1),
body: SingleChildScrollView(
child: Stack(
// overflow: Overflow.visible,
children: <Widget>[
Positioned(
height: MediaQuery.of(context).size.height * 0.2,
left: -5,
right: -5,
top: -5,
child: Card(
color: Color.fromRGBO(109, 0, 252, 1.0),
elevation: 0.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40)),
),
),
),
Positioned(
left: 330.0,
right: 0.0,
height: MediaQuery.of(context).size.height * 0.1,
top: 15,
child: IconButton(
color: Colors.white,
icon: Icon(Icons.notifications),
onPressed: () {
print(MediaQuery.of(context).size.width * 0.19);
},
),
),
Positioned(
left: 16.0,
right: 16.0,
height: MediaQuery.of(context).size.height * 0.33,
top: 70,
child: Card(
color: Colors.white,
elevation: 0.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: 40, top: 50),
child: Text(
"Hi, Shah",
style: TextStyle(
fontSize: 20.0,
letterSpacing: 3,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: EdgeInsets.only(left: 40, top: 10),
child: Text(
"What tou like to learn \n\ntoday!",
style: TextStyle(
fontSize: 14.0,
letterSpacing: 1,
fontWeight: FontWeight.normal,
),
),
),
],
),
Padding(
padding: EdgeInsets.only(left: 40),
child: Center(
child: CircularPercentIndicator(
radius: 70.0,
animation: true,
animationDuration: 1200,
lineWidth: 3.0,
percent: 0.8,
center: new Text(
"75",
style: new TextStyle(
fontWeight: FontWeight.bold, fontSize: 20.0),
),
circularStrokeCap: CircularStrokeCap.butt,
backgroundColor: Colors.grey,
progressColor: Color.fromRGBO(109, 0, 252, 1.0),
),
))
/* Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
],
),*/
],
),
),
),
Positioned(
left: 45.0,
width: MediaQuery.of(context).size.width * 0.19,
height: MediaQuery.of(context).size.height * 0.1,
top: 35,
child: Card(
elevation: 16,
shadowColor: Colors.yellow[700],
color: Colors.yellow[700],
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 0),
borderRadius: BorderRadius.circular(16),
),
child: Image.asset(
"assets/stetho.png",
),
),
),
Positioned(
left: 55.0,
height: 1,
width: MediaQuery.of(context).size.width * 0.81,
top: 215,
child: Divider(
thickness: 1,
color: Colors.grey,
)),
Positioned(
left: 55.0,
right: 10.0,
height: MediaQuery.of(context).size.height * 0.1,
top: 230,
child: Text(
"5 CHAPTERS | 4 LESSONS",
style: TextStyle(
fontSize: 12,
color: Colors.grey,
fontWeight: FontWeight.bold),
)),
Positioned(
left: 30.0,
right: 10.0,
height: MediaQuery.of(context).size.height* 0.1,
top: 280,
child: Text(
"Studying",
style: TextStyle(
fontSize: 14,
color: Colors.grey[700],
fontWeight: FontWeight.bold),
)),
Padding(
padding: EdgeInsets.only(left: 30, top: 295),
child: SizedBox(
height: MediaQuery.of(context).size.height* 0.4,
child: new Swiper(
layout: SwiperLayout.CUSTOM,
customLayoutOption: new CustomLayoutOption(
startIndex: -1,
stateCount: 3
).addRotate([
0.0/180,
00.0,
0.0/180
]).addTranslate([
new Offset(-400.0, -0.0),
new Offset(-40.0, 0.0),
new Offset(270.0, -0.0)
]),
itemWidth: MediaQuery.of(context).size.width* 0.75,
itemHeight: MediaQuery.of(context).size.height* 0.4,
itemBuilder: (context, index) {
return new Card(
elevation: 1,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white, width: 0),
borderRadius: BorderRadius.circular(24)
),
color: Colors.white,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: MediaQuery.of(context).size.height* 0.2,
width: MediaQuery.of(context).size.width* 0.8,
child: Image.asset("assets/card_doc.png",
fit: BoxFit.cover,),
),
Padding(padding: EdgeInsets.only(left: 18, top: 18),
child: Text("Day 1",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: Colors.grey[600],
letterSpacing: 1
),)),
Padding(padding: EdgeInsets.only(left: 18, top: 10, bottom: 30),
child: Text("Chapter #1",style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 18,
color: Colors.black,
letterSpacing: 1
),),
),
Row(
mainAxisAlignment: MainAxisAlignment.start, //Center Row contents horizontally,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: 18),
child: Text("5 OF 8 LESSONS",style: TextStyle(fontSize: 12,letterSpacing: 1),),
),
Padding(
padding: EdgeInsets.only(left: 60),
child: SizedBox(
height: MediaQuery.of(context).size.height* 0.02,
width: MediaQuery.of(context).size.height* 0.1,
child: Card(
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.lightGreenAccent, width: 1),
borderRadius: BorderRadius.circular(60)),
child: LinearProgressIndicator(
backgroundColor: Colors.white,
valueColor: AlwaysStoppedAnimation<Color>(Colors.lightGreenAccent,),
value: 0.5,
),
)
)
),
],
)
],
),
);
},
itemCount: 10,)
),
),
Positioned(
left: 24.0,
right: 20.0,
height: MediaQuery.of(context).size.height* 0.1,
top: 620,
child: Card(
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(padding: EdgeInsets.only(left: 18, right: 18, top: 8),
child: Text("Jump to current chapter",style: TextStyle(letterSpacing: 1),),),
Padding(padding: EdgeInsets.only(left: 18,top: 8),
child: Text("Chapter #1",style: TextStyle(letterSpacing: 1, fontSize: 15,fontWeight: FontWeight.bold),),)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center, //Center Row contents horizontally,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(padding: EdgeInsets.only(left: 66),
child: IconButton(icon: Icon(Icons.arrow_forward), onPressed: () { },)),
],
)
],
),
),
),
],
),
),
);
}
}
发布于 2020-10-14 10:19:34
你有没有试过把SingleChildScrollView
往上移?
我的意思是,尝试使用SingleChildScrollView
来包装Scaffold
,而不是Stack
。
另外,我不明白为什么你要用Position把所有的元素放在一个页面上……在我看来,这真的很难维护。
发布于 2020-10-14 10:22:44
my emulator image确实显示了任何问题,但正如我从代码中看到的那样,SingleChildScrollView
位于根,溢出可能发生在swipper子级,我认为小部件没有足够的空间LinearProgressIndicator
和它上面的文本小部件……你应该检查一下
https://stackoverflow.com/questions/64350948
复制相似问题