flutter - 如何修复文本在 flutter 中滚动图像

Question

我正在尝试构建一些简单的布局，图像在上面，文字在下面。

每当我滚动文本时，文本都会向上滚动并覆盖图像。

  Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
      title: Text('Tax'),
    ),
    body: Container(
      constraints: BoxConstraints.expand(),
      color: Color(0xFFE0E0E0),
      child: Stack(
        children: <Widget>[
          _getBackGround(),
          _imglo(),
          _getContent(),
        ],
      ),
Widget _getContent(){
  return ListView(
    padding: EdgeInsets.fromLTRB(0.0, 272.0, 0.0, 32.0),
    children: <Widget>[
      Container(

        padding: EdgeInsets.symmetric(horizontal: 32.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Text("ssssssss", style: headerTextStyle),
            Separator(),
            Text("ssss", style: 
regulatTextStyle,textDirection: TextDirection.rtl,),
Text("sss", style: regulatTextStyle,textDirection: 
TextDirection.rtl,)
        ),
      )
    ],
  );
}

我该怎么做才能使文本不与图像重叠？

Answer 1

您的文字会在图像上滚动，因为您使用的是 Stack , 用于将元素叠加在一起。对于你想要实现的目标，看起来你根本不需要 Stack ，你需要一个装饰的 Container和一个 Column .

假设您的背景是一张图片(因此在您的问题中使用了 Stack)，您的构建方法可能如下所示:

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Container( // An empty widget we can decorate.
        decoration: new BoxDecoration( // We want to decorate it with an...
          image: new DecorationImage( // ...image!
            image: new NetworkImage("https://via.placeholder.com/800"),
            fit: BoxFit.cover, // Make the image cover all space in the container.
          ),
        ),
        child: Column( // Arranges children vertically on the screen, no scrolling.
          children: <Widget>[
            Image.network("https://via.placeholder.com/300"), // `_imglo` goes here.
            Expanded( // Make the ListView fill up all remaining column space.
              child: ListView.builder(
                // Example ListView. Your `_getContent()` goes here.
                itemCount: 10,
                itemBuilder: (_, index) => ListTile(
                      title: const Text("Example"),
                      subtitle: Text(
                        index.toString(),
                      ),
                    ),
              ),
            ),
          ],
        ),
      ),
    );
  }

或者，如果您只需要颜色作为背景，Scaffold 小部件有一个 backgroundColor 属性:

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.blue,
      body: ...
    );
  }