Question

我正在尝试构建包含Stack小部件的Card列表，Card + Stack小部件可以正常工作，直到将其设为列表视图的子级为止，然后Stack不再自动调整为其最大子级。这导致我的视图应该与右下角对齐，而只能右对齐，因为堆栈底部的尺寸不正确。

我尝试用Align包裹Stack的所有子项，但这也无济于事。定位与Align具有相同的结果。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stack Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        body: ListView(
          children: <Widget>[
            _buildCard(context),
            _buildCard(context),
            _buildCard(context),
            _buildCard(context),
            _buildCard(context),
            _buildCard(context),
          ],
        ),
      );

  Widget _buildCard(BuildContext context) => Card(
        child: Stack(
          children: <Widget>[
            SizedBox(
              height: 200,
              child: Container(
                color: Colors.black,
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: SizedBox(
                height: 50,
                width: 50,
                child: Container(
                  color: Colors.red,
                ),
              ),
            ),
          ],
        ),
      );
}

我希望发生的是，堆叠将在黑色容器周围正确调整大小，从而将红色容器放置在卡的右下角。

Answer 1

也尝试在堆栈上设置对齐方式

alignment: AlignmentDirectional.bottomEnd,

喜欢这个

Widget _buildCard(BuildContext context) => Card(
    child: Stack(
      alignment: AlignmentDirectional.bottomEnd,
      children: <Widget>[
        SizedBox(
          height: 200,
          child: Container(
            color: Colors.black,
          ),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: SizedBox(
            height: 50,
            width: 50,
            child: Container(
              color: Colors.red,
            ),
          ),
        ),
      ],
    ),
  );

screenshot

Flutter Stack小部件在ListView中使用时无法正确调整大小

1 个答案: