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，所以您的文字会在图像上滚动，该Container用于使元素彼此重叠。对于您想要实现的目标，似乎根本不需要Stack，需要修饰的Column和{{3}}。

假设您的背景是一张图片（因此在问题中使用了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(),
           )
         ],
       ),
     ),
   );
 }
 }

如何固定文本在图像中滚动

2 个答案: