文本小部件始终保持在顶部并且在我滚动时不会消失

Posted 2023-02-23

【中文标题】文本小部件始终保持在顶部并且在我滚动时不会消失

【英文标题】：Text widget always stays on top and doesn't disappear as I scroll

【发布时间】：2021-09-21 03:01:43

【问题描述】：

即使我向下滚动，我的文本小部件“更多”始终保持在顶部，我没有找到问题的根源，

我尝试将它包装在 SingleChildScrollView 小部件中，但仍然没有任何改变，Text 小部件是否有任何参数允许它在我不知道的用户滚动时滚动？还是完全是另外一回事？

代码：

class MorePage extends StatefulWidget 
  @override
  _MorePageState createState() => _MorePageState();


class _MorePageState extends State<MorePage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: white,
      body: Stack(
        // YESSSS
        children: <Widget>[
          Row(
              mainAxisAlignment: MainAxisAlignment.center, children: [
            SizedBox(height: 45.0),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: kDefaultPaddin),
              child: SizedBox(
                height: 25,
              child: Text(
                "MORE",
                style: TextStyle(
                    color: black,
                    fontFamily: "Raleway",
                    fontWeight: FontWeight.w700,
                    fontSize: 25),
                textAlign: TextAlign.center,
              ),
            ),),
          ]),
          Container(
            // YESSSS
            child: getBody(),
          ),
        ],
      ),
    );
  

【参考方案1】：

您正在使用 Stack()，Stack 会将子级叠加在其他之上。

【参考方案2】：

在使用Stack wrap 和固定大小的小部件时，它可以只是Container()，也可以在使用堆栈时，使用对齐小部件作为子级 => Center、Align、Positioned，否则使用堆栈fit 财产，

了解更多关于Stack的信息请访问https://api.flutter.dev/flutter/widgets/Stack-class.html

import 'package:flutter/material.dart';

class MorePage extends StatefulWidget 
  @override
  _MorePageState createState() => _MorePageState();


class _MorePageState extends State<MorePage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Container(
          child: Stack(
            // YESSSS
            children: <Widget>[
              Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                SizedBox(height: 45.0),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 22),
                  child: SizedBox(
                    height: 25,
                    child: Text(
                      "MORE",
                      style: TextStyle(
                          color: Colors.black,
                          fontFamily: "Raleway",
                          fontWeight: FontWeight.w700,
                          fontSize: 25),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ]),
              Center(
                child: Container(
                    color: Colors.amber,
                    // YESSSS
                    height: 1333,
                    child: Text("Body")
                    // getBody(),
                    ),
              ),
            ],
          ),
        ),
      ),
    );