如何修复文本在颤振中滚动图像

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, which is used for overlaying elements on top of each other. For what you want to achieve, it looks like you don't need a Stack at all, you need a decorated Container and a 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: ...
    );
  }

Answer 2

class SomeClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tax'),
      ),
      body: Container(
        constraints: BoxConstraints.expand(),
        color: Color(0xFFE0E0E0),
        child: Column(
          children: <Widget>[
           Stack(
              children: <Widget>[_getBackGround(), imglo()],
            ),
            Container(
              child: _getContent(),
           )
         ],
       ),
     ),
   );
 }
 }

如何修复文本在颤振中滚动图像

How to fix text scroll over image in flutter

flutter

flutter-layout