我正在尝试 Flutter 中的约会视图。所有小部件最初都放置正常,但是当我滚动列表视图(可用时间列表)时,滚动动画会干扰放置在其顶部的元素(日历)。我知道我可以使用下拉菜单,但我更喜欢列表。我已经尝试了 StackOverflow 的一些想法,但仍然无法使其正常工作
参考图片:
//simple calender
import 'package:flutter/material.dart';
import 'package:hswebapp/days.dart';
import 'package:hswebapp/hours.dart';
import 'package:table_calendar/table_calendar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Appointment view',
theme: ThemeData(
primarySwatch: Colors.purple,
),
home: MyHomePage(title: 'Appointment view'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
CalendarFormat _calendarFormat = CalendarFormat.twoWeeks;
DateTime _focusedDay = DateTime.now();
DateTime? _selectedDay;
DateTime kFirstDay = DateTime.utc(2021, 1, 15);
DateTime kLastDay = DateTime.utc(2022, 1, 20);
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Text('TableCalendar - Basics'),
),
body: SafeArea(
child: Column(
children: <Widget>[
daysCalender(),
Text("Available Hours"),
const SizedBox(
height: 10,
),
SingleChildScrollView(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 150,
child:
AvailableHours(),
)
],
) // your column1
),
),
TextFormField(
decoration: InputDecoration(
border: UnderlineInputBorder(), labelText: 'Name'),
),
TextFormField(
decoration: InputDecoration(
border: UnderlineInputBorder(), labelText: 'Phone'),
),
TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
),
onPressed: () {},
child: Text('Confirm'),
)
],
),
)
);
}
}
该问题是由于Column Widget造成的。
它需要最大垂直空间,直到它被
SizedBox
或 Container
包裹,如您的情况,并给出一些特定的 height
。
所以,尝试将您的
Container
包裹在 SingleScrollChildView
中,并加入一些 height
让我们说 height = 200.0
并进行拍摄。
希望这会起作用:)
我在使用 Listview.builder 时遇到了类似的问题。就我而言,我通过 FutureBuilder 获取数据。我将在下面详细说明我如何处理我的代码。
ListView(
children: [
...
FutureBuilder(
controller:controller.fetchPosts(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return const Align(
alignment: Alignment.center,
child:Text(
"An error occurred while trying to fetch data."),
);
} else (snapshot.hasData) {
List<PostModel> userItems =
snapshot.data as List<PostModel>;
final userPost = userPosts.map((e) => e.toJson());
final postItem = userPost.toList();
//then i return a column where the "children" map into my
postItem
return Column (
children: postItem.map<Widget>((item) {}).toList());
}})])
我希望这会有所帮助。