使用 scrollDirection 使 ListView.builder 水平面临困难：Axis.horizo​​ntal

Question

我正在尝试在 Flexible 中使用 ListView.builder。当我将其更改为滚动方向时，它在滚动方向上工作正常：Axis.vertical：Axis.horizo​​ntal。它不工作

 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()),],),
          ),

我在这个 Flexibleenter image description here 中调用它 试图实现Ola Cab中显示的车辆列表enter code here

Answer 1

这是一个工作示例

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.
    );
  }
}