flutter - 使用 scrollDirection 使 ListView.builder 水平面临困难:Axis.horizontal
问题描述
我正在尝试在 Flexible 中使用 ListView.builder。当我将其更改为滚动方向时,它在滚动方向上工作正常:Axis.vertical:Axis.horizontal。它不工作
List modeData = [
{'modeName': 'VAN', 'modeTime': '3 min', 'modeIcon': Icons.android },
{'modeName': 'VAN', 'modeTime': '3 min', 'modeIcon': Icons.android },
];
callback(data) {}
int _selectedIndex = 0;
_onSelected ( int index ) {
setState(() => _selectedIndex = index);
}
@override
Widget build(BuildContext context) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: modeData.length,
itemBuilder: (context, index) => Container(
child: ListTile(
onTap: () => _onSelected(index),
// title: TravelMode(modeName, modeIcon, modeTime, isSelected),
title: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(modeData[index]['modeTime']),
Container(
decoration: new BoxDecoration(enter code here
color: _selectedIndex != null && _selectedIndex ==
index ? Colors.blue : null,
borderRadius: new BorderRadius.all(const
Radius.circular(40.0))),
child: IconButton(
icon: Icon(modeData[index]['modeIcon']),
color: Colors.black38,
),
),
Text(modeData[index]['modeName'])
],
),
),
)
);
}
}
Flexible(
flex: 2,
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child:
TravelModesList()),],),
),
我在此灵活输入图像描述中调用它,
试图实现 Ola Cab 中显示的车辆列表enter code here
解决方案
这是一个工作示例
import 'package:flutter/material.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: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List modeData = [
{'modeName': 'VAN', 'modeTime': '3 min', 'modeIcon': Icons.android},
{'modeName': 'VAN', 'modeTime': '3 min', 'modeIcon': Icons.android},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: modeData.length,
itemBuilder: (context, index) {
return Padding(padding: EdgeInsets.only(left: 10.0,), child: Column(
children: [
Text(modeData[index]['modeTime']),
Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(
Radius.circular(
40.0,
),
),
),
child: IconButton(
icon: Icon(modeData[index]['modeIcon']),
color: Colors.black38,
),
),
],
),);
},
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
推荐阅读
- html - (HTML / CSS)如何在父元素中垂直居中网格
- audiokit - AKSequencer 到 AudioKit.renderToFile 只渲染第一个音符
- c# - C# interop 单词段落间距不会改变
- c# - 除以 0 错误 C#
- odoo - Odoo 10 - 解析错误:
- r - ifelse 在 r 中进行分类
- django - Django Rest Framework (auth_user.username) 上的错误 POST 请求
- python - 如何在 Python 中创建没有 getter 的 setter?
- java - 使用默认编解码器注册表到 POJO 的 MongoDb 文档给出“空”值
- java - 在大量插入 SQLLDR 后获取或检索生成的 PK