未来列表视图 - BoxConstraints 强制无限宽度答案

【问题标题】：Future List View - BoxConstraints forces an infinite width未来列表视图 - BoxConstraints 强制无限宽度
【发布时间】：2020-06-29 07:11:00
【问题描述】：

我正在尝试让列表生成器工作。我正在使用 FutureBuilder，因为我正在填充数据“BoxConstraints 强制无限宽度。”

我已经尝试添加容器、扩展和大小盒。要么我在展示位置上做错了什么，要么我的方向完全错误。请帮忙。

class SubredditList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: Provider.of<RedditAPIService>(context, listen: false)
            .getSubreddits(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List data = snapshot.data;
            return ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: data.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(data[index]['name']),
//                      subtitle: Image(image: NetworkImage(data[index]['url'])),
                  );
//                    Text(data[1]['image'])
                });
          } else if (snapshot.hasError) {
            return Card(child: Text("${snapshot.error}"));
          }
          return CircularProgressIndicator();
        });
  }
}

父小部件：

class ViewSubredditAdmin extends StatelessWidget {
  static const String id = 'viewSubredditAdmin';
  List newsub = List();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: GlobalAppBar(
        appbarTitle: 'Subreddit - Admin',
      ),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            SubredditList(),
            Container(
              child: ButtonBar(
                alignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    child: Text("Get New Submissions"),
                    onPressed: () {
                      print(
                          Provider.of<RedditAPIService>(context, listen: false)
                              .getNewSubmissions(subredditName: 'Python')
                              .runtimeType);
                    },
                    color: Colors.red,
                    textColor: Colors.yellow,
                    padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                    splashColor: Colors.grey,
                  ),
                ],
              ),
            ),
            Container(
              child: Center(
                child: ViewSubmissionsAdmin(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter listview dart

【解决方案1】：

您可以在下面复制粘贴运行完整代码
我使用下面的演示代码来模拟这种情况
你可以用Container 包裹ListTile 并提供width
代码sn-p

return Container(
                  width: 100,
                  child: ListTile(title: Text(numbers[index].toString())));

工作演示

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MainScreen(),
    ));

class MainScreen extends StatelessWidget {
  final List<int> numbers = [1, 2, 3, 5, 8, 13, 21, 34, 55];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Horizontal ListView'),
        ),
        body: Container(
            padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 24.0),
            height: MediaQuery.of(context).size.height * 0.35,
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: numbers.length,
                itemBuilder: (context, index) {
                  return Container(
                      width: 100,
                      child: ListTile(title: Text(numbers[index].toString())));
                })));
  }
}

【讨论】：