代码之家 › 专栏 › 技术社区 › Alex Lomia

如何在不导致Flutter中渲染溢出的情况下将小部件固定到屏幕底部?

flutter

Alex Lomia · 技术社区 · 3 年前

我想达到如下屏幕截图所示的效果:

第一种情况:

绿色小部件固定在底部。容器不可滚动,因为内容足够短。

第二种情况:

绿色小部件被推到底部。容器是可滚动的,因为内容太长,无法放入视口。

问题是,从技术上讲 SingleChildScrollView's 高度是无限的,不可能将绿色小部件推到视口的末尾。

那么,需要做些什么才能达到这种效果(同样,蓝色和绿色小部件都是动态高度的)?

1 回复 | 直到 3 年前

Braden Bagby 3 年前

试试这个:

import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Column(
        children: [
          Expanded(
              child: SingleChildScrollView(
            child: Container(
              height: 300,
              color: Colors.blue,
            ),
          )),
          Container(
            height: 100,
            color: Colors.green,
          )
        ],
      )),
    );
  }
}

打乱蓝色容器的高度,滚动开始工作。这里的关键小工具是 Expanded 因为它使它的儿童身高成为柱内可用的最大房间。它将占用绿色容器未使用的其余空间

我强烈建议阅读 this article 以更好地了解小部件是如何在Flutter中布局的。