我正在尝试创建一个股票摘要样式小部件。它应该在发生时一次显示一个新闻项目,但是用户可以打开 DraggableScrollableSheet 并滚动浏览所有新闻项目的较长列表。
我的第一部分正在工作(在事件进入时一次滚动浏览一个事件),但我无法向上滑动工作表以查看其他项目。
List<NewsEvent> newsList = [];
class NewsEvent {
final int id;
final String event;
final String timestamp;
final Icon icon;
NewsEvent({
required this.id,
required this.event,
required this.timestamp,
required this.icon,
});
}
class NewsHandler {
ScrollController scrollController = ScrollController();
Widget newsFeed() {
return DraggableScrollableSheet(
initialChildSize: 0.1,
minChildSize: 0.1,
maxChildSize: 0.66,
snap: true,
expand: true,
builder: (context, ScrollController sheetScrollController) {
return Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
color: isLightMode ? colourOnPrimary : colourPrimaryLeastDark,
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(4.0),
//This container is for the 'handle' to indicate to the user that it can be pulled up
child: Container(
width: 50,
height: 3,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.grey,
),
),
),
Expanded(
child: ListView.builder(
physics: const ClampingScrollPhysics(),
controller: scrollController,
itemCount: newsList.length,
itemBuilder: (BuildContext context, int index) {
NewsEvent newsEvent = newsList[index];
TextStyle eventStyle = const TextStyle(fontSize: 16, color: Colors.black);
TextStyle timestampStyle = const TextStyle(fontSize: 12, fontStyle: FontStyle.italic, color: Colors.black);
return Column(
children: [
const SizedBox(height: 5, width: 300, child: Divider(color: Color.fromARGB(123, 158, 158, 158))),
ListTile(
leading: newsEvent.icon, // News icon
title: Row(
children: [
Expanded(
child: Text(newsEvent.event, style: eventStyle),
),
Text(newsEvent.timestamp, style: timestampStyle),
],
),
),
],
);
},
),
),
//),
],
),
);
},
);
}
//Call this to add a news item
void addNews(String event, Icon icon) {
String timestamp = DateFormat.jm().format(DateTime.now());
newsList.add(NewsEvent(id: newsID, event: event, timestamp: timestamp, icon: icon));
newsID++;
MapPageState? mapPageState = mapPageKey.currentState;
mapPageState?.mapPageSetState();
}
//Call this after adding a news item to scroll the list down.
void scrollDown(){
scrollController.animateTo(
scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut,
);
}
}
padding: const EdgeInsets.all(4.0),
//This container is for the 'handle' to indicate to the user that it can be pulled up
child: Container(
width: 50,
height: 3,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.grey,
),
),
),
如果其他人正在为此苦苦挣扎,您需要用 singlechildscrollview 包装它并给它sheetscrollcontroller。