如果悬停文本 Flutter，则堆栈不滚动

Question

我几乎得到了我想要的页面。但是当我将文本悬停在静态列上时，页面不会滚动。有解决方法吗？有人可以指出正确的方向吗？

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: CucinaGardaView(),
        ),
      ),
    );
  }
}

class CucinaGardaView extends StatelessWidget {
  const CucinaGardaView({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        //
        SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              PhotoItem(
                'https://images.unsplash.com/photo-1601628828688-632f38a5a7d0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1009&q=80',
              ),
              PhotoItem(
                'https://images.unsplash.com/photo-1554995207-c18c203602cb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
              ),
              PhotoItem(
                'https://images.unsplash.com/photo-1600210492493-0946911123ea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
              ),
            ],
          ),
        ),
//
        Positioned(
          left: MediaQuery.of(context).size.width / 2,
          top: 0.0,
          child: SizedBox(
            width: (MediaQuery.of(context).size.width / 2),
            height: MediaQuery.of(context).size.height,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 100.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    'Hello World!',
                    style: TextStyle(fontSize: 50.0),
                  ),
                  RichText(
                    text: const TextSpan(
                      children: [
                        TextSpan(text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
                      ],
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class PhotoItem extends StatelessWidget {
  PhotoItem(
    this.photoPath, {
    Key? key,
  }) : super(key: key);

  final String photoPath;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(
          width: MediaQuery.of(context).size.width / 2,
          child: Image.network(
            photoPath,
            fit: BoxFit.cover,
          ),
        ),
        SizedBox(width: MediaQuery.of(context).size.width / 2),
      ],
    );
  }
}

这只是一些填充文本，因为堆栈溢出表示此 post 中的代码太多...

Answer 1

使 SingleChildScrollView 成为 Stack 小部件的父级，这样文本也可以滚动。

这是代码。

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: CucinaGardaView(),
        ),
      ),
    );
  }
}

class CucinaGardaView extends StatelessWidget {
  const CucinaGardaView({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return 
   SingleChildScrollView( child:
Stack(
      children: [
        //
     
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              PhotoItem(
                'https://images.unsplash.com/photo-1601628828688-632f38a5a7d0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1009&q=80',
              ),
              PhotoItem(
                'https://images.unsplash.com/photo-1554995207-c18c203602cb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
              ),
              PhotoItem(
                'https://images.unsplash.com/photo-1600210492493-0946911123ea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
              ),
            ],
          ),
    
//
        Positioned(
          left: MediaQuery.of(context).size.width / 2,
          top: 0.0,
          child: SizedBox(
            width: (MediaQuery.of(context).size.width / 2),
            height: MediaQuery.of(context).size.height,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 100.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    'Hello World!',
                    style: TextStyle(fontSize: 50.0),
                  ),
                  RichText(
                    text: const TextSpan(
                      children: [
                        TextSpan(text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
                      ],
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    ));
  }
}

class PhotoItem extends StatelessWidget {
  PhotoItem(
    this.photoPath, {
    Key? key,
  }) : super(key: key);

  final String photoPath;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(
          width: MediaQuery.of(context).size.width / 2,
          child: Image.network(
            photoPath,
            fit: BoxFit.cover,
          ),
        ),
        SizedBox(width: MediaQuery.of(context).size.width / 2),
      ],
    );
  }
}

Answer 2

在 Stack 之外使用 SingleChildScrollView。

SingleChildScrollView(child: Stack())

此外，如果您希望堆栈始终可滚动，您可以添加 AlwaysScrollableScrollPhysics()。

SingleChildScrollView(physics: const AlwaysScrollableScrollPhysics(), child: Stack())

Answer 3

只需将您的文本包裹在 IgnorePointer 小部件中。

如果悬停文本 Flutter，则堆栈不滚动

Stack not scrolling if hovering text Flutter

dart

flutter

flutter-web