如何使ListView CrossAxisAlignment包装内容?

问题描述 投票:0回答:1

我的目标是制作一个水平滚动的ListView。我希望高度与ListView中最大项目的高度相同。现在,水平ListView展开以填充整个垂直屏幕。如何缩小高度而不指定高度但仍可以滚动?

这里是带有我所拥有代码的dartpad链接:https://dartpad.dev/13bd819a46e6c2d840147a5855a6e54c

flutter dart flutter-layout
1个回答
2
投票

也许这将是您想要的输出,尝试一下,

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var fraction = OutlinedContainer(
        child: IntrinsicWidth(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text("100"),
                Container(
                  height: 2,
                  color: Colors.black,
                ),
                Text("300"),
              ],
            ),
          ),
        ));

    return Scaffold(
        body: OutlinedContainer(
          child: Column(
            mainAxisSize: MainAxisSize.min,
          children: [Wrap(
          children: <Widget>[
            fraction,fraction,   fraction
          ],),]),
        ));
  }
}

class OutlinedContainer extends Container {
  OutlinedContainer({@required Widget child}) : super(child: child,             decoration: BoxDecoration(
                border: Border.all(color: Colors.blue, width: 3),
                borderRadius: BorderRadius.circular(10)));
}

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.