在水平屏幕方向垂直滚动时出现问题

Question

我目前运行在尝试修复我在此应用程序屏幕上的水平滚动时遇到另一个问题。我有 which got answered about an overflow issue I was having. The solution was to add a scroll which fixed the issue, but created a new issue. So is there anyway to take my current code presented below or the code in the 来解决我在下面提交的图片中看到的问题？感谢您的帮助！

编辑：我提供的图像显示滚动超过了预定点。 ListTiles 不应作为背景置于其他容器之后。它们应该在到达蓝色部分的顶部时消失。该应用程序旨在用于垂直视图，但我还想在水平视图中使用这部分代码。我必须创建滚动以便页面不会溢出像素，但现在当您向上滚动时它会导致 ListTiles 显示在问题和示例部分的后面。有没有办法让 ListTiles 保持垂直滚动，以便它在垂直和水平方向上都能正常工作phone。

当前代码quiz.dart

class Salvation extends StatefulWidget {
  const Salvation({Key? key}) : super(key: key);

  @override
  State<Salvation> createState() => _SalvationState();
}

class _SalvationState extends State<Salvation> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Quiz')),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return Column(
            children: [
              Container(
                  height: constraints.maxHeight / 4,
                  child: Padding(
                      padding: EdgeInsets.fromLTRB(12, 12, 12, 8),
                      child: Align(
                        alignment: Alignment.topLeft,
                        child: Text('Question',
                            style: TextStyle(
                              fontSize: 20.0,
                            )),
                      ))),
              Visibility(
                // visible: ,
                child: Container(
                  height: constraints.maxHeight / 4,
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(12, 3, 12, 6),
                    child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Color.fromRGBO(118, 60, 51, 0.5),
                        ),
                        width: double.infinity,
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text('Example/Image Box',
                                  style: TextStyle(
                                    fontSize: 17.0,
                                  )),
                              // RichText(text: text)
                              Text('Hello there',
                                  style: TextStyle(
                                    fontSize: 15.0,
                                  )),
                            ],
                          ),
                        )),
                  ),
                ),
              ),
              Container(
                height: constraints.maxHeight / 2,
                color: const Color.fromRGBO(155, 205, 255, 0.8),
                child: Padding(
                    padding: const EdgeInsets.fromLTRB(12, 12, 12, 20),
                    child: ListView(children: [
                        Padding(
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
                          child: ListTile(
                            title: Text('Option A'),
                            tileColor: const Color.fromRGBO(6, 145, 248, 1),
                            shape: RoundedRectangleBorder(
                                side: const BorderSide(
                                    color: Colors.black, width: 10),
                                borderRadius: BorderRadius.circular(5)),
                            onTap: () {},
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
                          child: ListTile(
                            title: Text('Option B'),
                            tileColor: const Color.fromRGBO(6, 145, 248, 1),
                            shape: RoundedRectangleBorder(
                                side: const BorderSide(
                                    color: Colors.black, width: 10),
                                borderRadius: BorderRadius.circular(5)),
                            onTap: () {},
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
                          child: ListTile(
                            title: Text('Option C'),
                            tileColor: const Color.fromRGBO(6, 145, 248, 1),
                            shape: RoundedRectangleBorder(
                                side: const BorderSide(
                                    color: Colors.black, width: 10),
                                borderRadius: BorderRadius.circular(5)),
                            onTap: () {},
                            onLongPress: () {},
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
                          child: ListTile(
                            title: Text('Option D'),
                            tileColor: const Color.fromRGBO(6, 145, 248, 1),
                            shape: RoundedRectangleBorder(
                                side: const BorderSide(
                                    color: Colors.black, width: 10),
                                borderRadius: BorderRadius.circular(5)),
                            onTap: () {},
                          ),
                        ),
                      ]),
                    )),
              
            ],
          );
        },
      ),
    );
  }
}

Answer 1

我认为这会有效，如果有效请标记为已接受..

代码:

Widget build(BuildContext context) {
    double height=MediaQuery.of(context).size.height-60.0;
    double width=MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(title: const Text('Quiz')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            width: width,
            height: height/3,
            child: Container(
              padding: const EdgeInsets.all(10),
              child: ListView.builder(
                  itemCount: 10,
                  itemBuilder: (context,index){
                    return ListTile(
                      title: Text('Tile No ${index+1}'),
                      tileColor: Colors.blueGrey,
                );
              }),
            ),
          ),
          SizedBox(
            width: width,
            height:height/3,
            child: Container(color: Colors.white,),
          ),
          SizedBox(
            width: width,
            height: height/3,
            child: Container(color: Colors.yellow,),
          ),

        ],
      ),
    );
  }

OutPut in image:

专栏场景..

Column(),//it's allow multiple Childs Vertical by default it have not scroll property.

SingleChildScrollView( child: Column(),), // now with the help of Parent Widget column can scrollable.

相同的场景适用于 Row()

Row(), //it's allow multiple Childs Horizontal by default it have not scroll
SingleChildScrollView(scrollDirection: Axis.horizontal, child:Row(),)// now with the help of Parent Widget row can scrollable in Horizontal Direction.

ListView() 的场景

ListView(),//It's allow us to assign multiple childs with scroll property vertically but we can change the scrolldirection to horizontal

现在由您决定哪个小部件可以完全帮助您解决弯曲问题

Answer 2

如果有帮助请采纳

我添加了一个简单的例子
最简单的方法是在卡片视图中添加您的列，然后它只会在卡片视图中滚动或者如果您不想使用卡片视图
您必须向容器添加宽度和颜色，它才会起作用

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Quiz")),
      body: SizedBox(
        width: double.infinity,
        child: Column(
          children: [
            Container(
// here color and width added to container (optional: If you dont want to use card view)
              width: Get.width,
              // color: Colors.red,
              height: 200,
              child: Text("Question"),
            ),
            Container(
              // color: Colors.white,
              width: Get.width,

              height: 200,
              child: Text("Image Box"),
            ),
            Flexible(
              child: Expanded(
                child: SingleChildScrollView(
// here a card view added... it will solve your problem
                  child: Card(
                    child: Column(
                      children: [

                        Padding(
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
                          child: ListTile(
                            title: Text('Option A'),
                            tileColor: const Color.fromRGBO(6, 145, 248, 1),
                            shape: RoundedRectangleBorder(
                                side: const BorderSide(
                                    color: Colors.black, width: 10),
                                borderRadius: BorderRadius.circular(5)),
                            onTap: () {},
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
                          child: ListTile(
                            title: Text('Option B'),
                            tileColor: const Color.fromRGBO(6, 145, 248, 1),
                            shape: RoundedRectangleBorder(
                                side: const BorderSide(
                                    color: Colors.black, width: 10),
                                borderRadius: BorderRadius.circular(5)),
                            onTap: () {},
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
                          child: ListTile(
                            title: Text('Option C'),
                            tileColor: const Color.fromRGBO(6, 145, 248, 1),
                            shape: RoundedRectangleBorder(
                                side: const BorderSide(
                                    color: Colors.black, width: 10),
                                borderRadius: BorderRadius.circular(5)),
                            onTap: () {},
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
                          child: ListTile(
                            title: Text('Option D'),
                            tileColor: const Color.fromRGBO(6, 145, 248, 1),
                            shape: RoundedRectangleBorder(
                                side: const BorderSide(
                                    color: Colors.black, width: 10),
                                borderRadius: BorderRadius.circular(5)),
                            onTap: () {},
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
                          child: ListTile(
                            title: Text('Option E'),
                            tileColor: const Color.fromRGBO(6, 145, 248, 1),
                            shape: RoundedRectangleBorder(
                                side: const BorderSide(
                                    color: Colors.black, width: 10),
                                borderRadius: BorderRadius.circular(5)),
                            onTap: () {},
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
                          child: ListTile(
                            title: Text('Option F'),
                            tileColor: const Color.fromRGBO(6, 145, 248, 1),
                            shape: RoundedRectangleBorder(
                                side: const BorderSide(
                                    color: Colors.black, width: 10),
                                borderRadius: BorderRadius.circular(5)),
                            onTap: () {},
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            )

          ],
        ),
      ),
    );
  }
}

[![输出图像]

在水平屏幕方向垂直滚动时出现问题

Having issues scrolling vertically in a horizontal screen orientation

dart

flutter

flutter-layout