无法在水平列表中获取视频列表

Question

目前我正在从YouTube获取视频。下面的代码只是垂直列出我的视频。我希望视频水平排列。我尝试了不同的方法，但都没有成功。我尝试了一堆选项，但只留下了一些错误。所以我需要帮助，我应该实施什么改变。

class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
Channel _channel;
bool _isLoading = false;

@override
void initState() {
super.initState();
_initChannel();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);


}




//UCtfK5Khr3psKzUP9HuYYgrw
_initChannel() async {
Channel channel = await APIService.instance
.fetchChannel(channelId: 'Random#');
setState(() {
_channel = channel;
});
}

_buildProfileInfo() {
return Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(20.0),
height: 100.0,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(0, 1),
blurRadius: 6.0,
),
],
),
child: Row(
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.white,
radius: 30.0,
backgroundImage: NetworkImage(_channel.profilePictureUrl),
),
SizedBox(width: 12.0),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
_channel.title,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
fontWeight: FontWeight.w600,
),
overflow: TextOverflow.ellipsis,
),
// Text(
//   '${_channel.subscriberCount} subscribers',
//   style: TextStyle(
//     color: Colors.grey[600],
//     fontSize: 16.0,
//     fontWeight: FontWeight.w600,
//   ),
//   overflow: TextOverflow.ellipsis,
// ),
],
),
)
],
),
);
}

_buildVideo(Video video) {
return GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => VideoScreen(id: video.id),
),
),
child:
Container(
margin: EdgeInsets.symmetric(horizontal: 20.0, vertical: 5.0),
padding: EdgeInsets.all(10.0),
height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(0, 1),
blurRadius: 6.0,
),
],
),
child: Row(
children: <Widget>[
Image(
width: 150.0,
image: NetworkImage(video.thumbnailUrl),
),
SizedBox(width: 10.0),
Expanded(
child: Text(
video.title,
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
),
),
),
],
),
),
);
}

_loadMoreVideos() async {
_isLoading = true;
List<Video> moreVideos = await APIService.instance
.fetchVideosFromPlaylist(playlistId: _channel.uploadPlaylistId);
List<Video> allVideos = _channel.videos..addAll(moreVideos);
setState(() {
_channel.videos = allVideos;
});
_isLoading = false;
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarHeight: 30,
title: Text('Jiwdo Pani Audio Video'),
backgroundColor: Colors.indigo[900],
automaticallyImplyLeading: false,
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.black,
size: 20,
),
onPressed: () => Get.to(UserMenu()))),



body: _channel != null
? NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification scrollDetails) {
if (!_isLoading &&
_channel.videos.length != int.parse(_channel.videoCount) &&
scrollDetails.metrics.pixels ==
scrollDetails.metrics.maxScrollExtent) {
_loadMoreVideos();
}
return false;
},

child: ListView.builder(
shrinkWrap: true,
//scrollDirection: Axis.horizontal,
itemCount: 1 + _channel.videos.length,
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return _buildProfileInfo();
}
Video video = _channel.videos[index - 1];
return _buildVideo(video);
},
),
)
: Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Theme.of(context).primaryColor, // Red
),
),
),
);
}
}

Answer 1

将listView构建器包装到容器中，并尝试添加宽度和高度。

Container( 
width : 500,
height : 500,
child:ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 1 + _channel.videos.length,
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return _buildProfileInfo();
}
Video video = _channel.videos[index - 1];
return _buildVideo(video);
},
),
),