检测小部件是否溢出

Question

我想根据蓝色小部件更改红色小部件的位置。

案例一： 如果蓝色列表小部件的高度小于屏幕高度，请将红色列表小部件定位到屏幕底部。

案例 2： 如果蓝色列表小部件的高度高于屏幕高度，请将红色列表小部件定位到小部件的底部。

Answer 1

当涉及列表的事情看起来过于复杂时，研究 slivers 通常很有趣。

对于您的情况，一条条子就可以解决您的问题：SliverFillRemaining

这是您问题的示例实现，很大程度上受到 flutter 团队提供的代码的启发。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildListDelegate(
            [
              Container(
                color: Colors.amber[300],
                height: 150.0,
              ),
              Container(
                color: Colors.green[300],
                height: 150.0,
              ),
            ]
          ),
        ),
        SliverFillRemaining(
          hasScrollBody: false,
          child: Container(
            alignment: Alignment.bottomCenter,
            color: Colors.red,
            child: Icon(
              Icons.sentiment_very_satisfied,
              size: 75,
              color: Colors.blue[900],
            ),
          ),
        ),
      ],
    );
  }
}

检测小部件是否溢出

Detecting if widget is overflowing

layout

dart

flutter