在Horizontal ListView的子级中创建一个水平List View [英] create an horizontal List View inside a child of Horizontal ListView
本文介绍了在Horizontal ListView的子级中创建一个水平List View的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新手，我想在单击水平ListView"的子级时显示水平列表.
I am new in flutter and I want to show an horizontal list when i click in a child of an Horizontal ListView.
我尝试过这段代码，但是当我用InkWell录制时，我不知道如何添加子ListView
I Tried with this code but i dont knpw how to add the child ListView when I taped in InkWell there is another way to this,
class Category extends StatelessWidget {
final String image_location;
final String image_caption;
Category({this.image_location, this.image_caption});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: InkWell(
onTap: () {
//Show the other listView
},
child: Container(
width: 100.0,
child: ListTile(
title: Image.asset(
image_location,
width: 100.0,
height: 80.0,
),
subtitle: Container(
alignment: Alignment.topCenter,
child: Text(image_caption, style: new TextStyle(fontSize: 12.0),),
)
),
),
),
);
}
}
我的ListView
class HorizontalList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 80.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Category(
image_location: 'images/cats/tshirt.png',
image_caption: 'shirt',
),
Category(
image_location: 'images/cats/dress.png',
image_caption: 'dress',
),
Category(
image_location: 'images/cats/jeans.png',
image_caption: 'pants',
),
],
),
);
}
}
下面是我需要的示例
推荐答案
我尝试使用Stack，ListView和其他常见小部件来实现类似的目的.
I tried to achieve something similar using Stack, ListView, and other common widgets.
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Demo App',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: SimpleTab(),
);
}
}
class CustomTab {
const CustomTab({this.title, this.color});
final String title;
final Color color;
}
class SimpleTab extends StatefulWidget {
@override
_SimpleTabState createState() => _SimpleTabState();
}
class _SimpleTabState extends State<SimpleTab>
with SingleTickerProviderStateMixin {
@override
void initState() {
super.initState();
}
String selectedContainer = "";
var data = [
{
'name': 'Shopping',
'icon': Icons.local_shipping,
'submenu': [
"Action1",
"Action2",
"Action1",
"Action2",
"Action1",
"Action2",
"Action1",
"Action2"
]
},
{
'name': 'Service',
'icon': Icons.room_service,
'submenu': ["Action3", "Action5"]
},
{
'name': 'Hotel',
'icon': Icons.hotel,
'submenu': ["Action4", "Action5"]
},
{
'name': 'More',
'icon': Icons.more,
'submenu': ["Action6", "Action7"]
},
{
'name': 'Custom',
'icon': Icons.add_to_photos,
'submenu': ["Action8", "Action9"]
},
{
'name': 'Custom2',
'icon': Icons.add_to_photos,
'submenu': ["Action10", "Action11"]
},
{
'name': 'Custom3',
'icon': Icons.add_to_photos,
'submenu': ["Action11", "Action12"]
},
{
'name': 'Custom4',
'icon': Icons.add_to_photos,
'submenu': ["Action13", "Action14"]
},
];
@override
Widget build(BuildContext context) {
// selectedContainer = "";
return Scaffold(
backgroundColor: Colors.blueGrey,
body: Stack(
children: <Widget>[
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[],
),
),
Align(
alignment: Alignment.bottomCenter,
child: bottomBar(data),
)
],
),
);
}
Widget bottomBar(data) {
return new Container(
margin: EdgeInsets.only(bottom: 10),
constraints: new BoxConstraints(
minHeight: 40.0,
maxHeight: 140.0,
),
color: Colors.transparent,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: createTopMenu(),
),
Expanded(
child: new ListView(
scrollDirection: Axis.horizontal,
children: data
.map<Widget>((e) => Column(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
AnimatedContainer(
height: selectedContainer != e['name'] ? 50 : 60,
width: selectedContainer != e['name'] ? 70 : 80,
duration: Duration(milliseconds: 150),
curve: Curves.fastOutSlowIn,
child: GestureDetector(
child: new Container(
color: Colors.transparent,
margin: EdgeInsets.only(right: 20, left: 4),
child: AnimatedContainer(
decoration: new BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
duration: Duration(milliseconds: 150),
curve: Curves.fastOutSlowIn,
width: selectedContainer != e['name']
? 30
: 40,
child: new LayoutBuilder(
builder: (context, constraint) {
return Padding(
padding: EdgeInsets.all(4),
child: new Icon(
e['icon'],
size: constraint.biggest.width - 16,
color:
selectedContainer != e['name']
? Colors.grey
: Colors.green,
));
}),
),
),
onTap: () {
setState(() {
if (selectedContainer == e['name']) {
selectedContainer = '';
} else {
selectedContainer = e['name'];
}
});
},
),
),
],
))
.toList(),
),
)
],
));
}
Widget createTopMenu() {
if (selectedContainer == "") {
return Container();
}
var item =
this.data.firstWhere((element) => element["name"] == selectedContainer);
if (item == null) return Container();
return new ListView(
scrollDirection: Axis.horizontal,
children: (item['submenu'] as List<String>)
.map<Widget>((e) => Column(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
GestureDetector(
child: new Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.green, width: 2),
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.circular(20))),
height: 40,
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(right: 20, left: 4),
child: Text(
e,
style: TextStyle(color: Colors.green),
)),
onTap: () {},
),
],
))
.toList(),
);
}
}
这篇关于在Horizontal ListView的子级中创建一个水平List View的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
