我正在尝试制作一个带有两行标题并在其下方有动画进度条的AppBar，如下所示:
我想使主标题与导航箭头对齐，因此我在标题上使用了填充，但动画进度栏与文本重叠:
有什么办法可以解决？
sign_video.dart *
Widget build(BuildContext context) {
return FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
// if (snapshot.connectionState == ConnectionState.done && isReady) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
iconTheme: IconThemeData(
color: Colors.black, //change your color here
),
backgroundColor: Colors.white,
elevation: 0,
title: Padding(
padding: const EdgeInsets.only(
top: 30.0,
bottom: 30.0,
),
child: SafeArea(
child: RichText(
text: TextSpan(
text: vidlist[currentIndexPosition].category,
style: kTitleTextStyle.copyWith(fontSize: 21),
children: [
TextSpan(text: "\n"),
TextSpan(
text: '${vidlist.length.toString()} words',
style: TextStyle(
fontSize: 18.0,
color: Color(0xFF505050),
),
),
]),
),
),
),
bottom: AnimatedProgressBar(
height: 10.0,
value: (currentIndexPosition + 1) / vidlist.length),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Container(
margin: EdgeInsets.only(top: 27.0),
width: double.infinity,
decoration: BoxDecoration(
color: Color(0xFFF1F3F6),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
child: Column(
children: [
SizedBox(
height: 15.0,
),
Text(
vidlist[currentIndexPosition].signName,
style: TextStyle(
fontSize: 50,
color: Color(0xFF505050),
fontWeight: FontWeight.w800,
),
),
SizedBox(
height: 30.0,
),
snapshot.connectionState == ConnectionState.done &&
isReady
? Padding(
padding: const EdgeInsets.only(
top: 8.0, left: 16.0, right: 16.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: AspectRatio(
aspectRatio: _controller.value.aspectRatio,
// Use the VideoPlayer widget to display the video.
child: VideoPlayer(_controller),
),
),
)
: Container(
height: 221.0,
width: 221.0,
child: CircularProgressIndicator(),
),
SizedBox(
height: 125.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RawMaterialButton(
onPressed: () {
setState(() {
if (currentIndexPosition <= 0) {
currentIndexPosition = vidlist.length - 1;
} else {
currentIndexPosition--;
}
_startPlay();
});
},
elevation: 5.0,
fillColor: Colors.white,
child: Icon(
FontAwesomeIcons.chevronLeft,
size: 25.0,
),
padding: EdgeInsets.all(20.0),
shape: CircleBorder(),
),
// RawMaterialButton(
// onPressed: () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => SignChecker(
// category:
// vidlist[currentIndexPosition].category,
// sign:
// vidlist[currentIndexPosition].signName,
// ),
// ),
// );
// },
// elevation: 5.0,
// fillColor: kDarkBlueColor,
// child: Icon(
// FontAwesomeIcons.camera,
// size: 25.0,
// color: Colors.white,
// ),
// padding: EdgeInsets.all(20.0),
// shape: CircleBorder(),
// ),
RawMaterialButton(
onPressed: () {
setState(() {
if (currentIndexPosition <= 0) {
currentIndexPosition = vidlist.length - 1;
} else {
currentIndexPosition--;
}
_startPlay();
});
},
elevation: 5.0,
fillColor: Colors.white,
child: Icon(
FontAwesomeIcons.chevronRight,
size: 25.0,
),
padding: EdgeInsets.all(20.0),
shape: CircleBorder(),
)
],
),
],
),
),
),
],
),
);
},
);
}
import 'package:flutter/material.dart';
class AnimatedProgressBar extends StatefulWidget
implements PreferredSizeWidget {
final double value;
final double height;
@override
Size preferredSize;
// AnimatedProgressBar({@required this.value, this.height = 12});
AnimatedProgressBar({this.height, this.value});
@override
_AnimatedProgressBarState createState() => _AnimatedProgressBarState();
}
class _AnimatedProgressBarState extends State<AnimatedProgressBar> {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints box) {
// using padding will cut the progress bar
// -145 to make the bar align with the appBar title
widget.preferredSize =
Size.fromWidth(box.maxWidth * _floor(widget.value - 145));
return Container(
width: box.maxWidth - 145,
child: Stack(
children: [
Container(
height: widget.height,
decoration: BoxDecoration(
color: Color(0XFFF1F3F6),
borderRadius: BorderRadius.all(
Radius.circular(widget.height),
),
),
),
AnimatedContainer(
duration: Duration(milliseconds: 800),
curve: Curves.easeOutCubic,
height: widget.height,
width: (box.maxWidth - 145) * _floor(widget.value),
decoration: BoxDecoration(
color: Color(0xFF0132C7),
borderRadius: BorderRadius.all(
Radius.circular(widget.height),
),
),
),
],
),
);
},
);
}
_floor(double value, [min = 0.0]) {
return value.sign <= min ? min : value;
}
}
最佳答案
我认为这是重叠的，因为AppBar的空间有限。在AppBar中给一个自定义高度希望它能工作。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Your title',
home: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0), // here the desired height
child: AppBar(
// ...
)
),
body: // ...
)
);
}
}
关于android - Flutter AppBar标题与动画进度条重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64519241/