当前位置： 文江博客话题详情

如何显示一个列的一列并允许滚动屏幕

发布于 2025-02-13 09:45:55 字数 2311 浏览 0 评论 0原文

我想用两个块开发该应用程序。每个块都是一个接一个的列。如果内容（如果不适合），则应出现滚动。

我写了下一个应用程序。但是问题是我无法获得滚动工作并获得最低水平的问题。我试图将所有内容包装在singlechildscrollview中，但它不起作用。

这是我的复制 - 帕斯特代码：

import 'dart:async';
import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'aaaa'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  late String title;
  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        children: [
          Row(children: [
            Expanded(
              flex: 1,
              child: Container(
                color: Color.fromARGB(255, 255, 252, 234),
                margin: const EdgeInsets.only(left: 20.0, top: 20.0, right: 20.0),
                child: SizedBox( // emulation of block with fixed size content.
                  height: 450,
                ),
              ),
            ),
          ]),

          // flex: 5,
          Expanded(
              flex: 2,
              child: Column(
                children: [
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                ],
              )),
        ],
      ),
    );
  }
}
原文

I want to develop app that with two blocks. Every block is column one after another. If content if not fitted to screen scrolls should be appeared.

I wrote next app. But problem that I can't get scrolling work and getting bottom overflow. I tried to wrap all in SingleChildScrollView but it wont work.

enter image description here

Here is my copy-paste code:

import 'dart:async';
import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'aaaa'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  late String title;
  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        children: [
          Row(children: [
            Expanded(
              flex: 1,
              child: Container(
                color: Color.fromARGB(255, 255, 252, 234),
                margin: const EdgeInsets.only(left: 20.0, top: 20.0, right: 20.0),
                child: SizedBox( // emulation of block with fixed size content.
                  height: 450,
                ),
              ),
            ),
          ]),

          // flex: 5,
          Expanded(
              flex: 2,
              child: Column(
                children: [
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                  Text("Hello"),
                ],
              )),
        ],
      ),
    );
  }
}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

傲世九天 2025-02-20 09:45:56

使用此代码：

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  late String title;
  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        children: [
          Row(children: [
            Expanded(
              flex: 1,
              child: Container(
                color: Color.fromARGB(255, 255, 252, 234),
                margin: const EdgeInsets.only(left: 20.0, top: 20.0, right: 20.0),
                child: SizedBox( // emulation of block with fixed size content.
                  height: 450,
                ),
              ),
            ),
          ]),

          // flex: 5,
          Expanded(
              flex: 2,
              child: Padding(
                padding: const EdgeInsets.only(left: 150),
                child: ListView(
                  shrinkWrap: true,
                  children: [
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                  ],
                ),
              )),
        ],
      ),
    );
  }
}

Use this code :

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  late String title;
  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        children: [
          Row(children: [
            Expanded(
              flex: 1,
              child: Container(
                color: Color.fromARGB(255, 255, 252, 234),
                margin: const EdgeInsets.only(left: 20.0, top: 20.0, right: 20.0),
                child: SizedBox( // emulation of block with fixed size content.
                  height: 450,
                ),
              ),
            ),
          ]),

          // flex: 5,
          Expanded(
              flex: 2,
              child: Padding(
                padding: const EdgeInsets.only(left: 150),
                child: ListView(
                  shrinkWrap: true,
                  children: [
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                  ],
                ),
              )),
        ],
      ),
    );
  }
}
回复 原文
长安忆 2025-02-20 09:45:56

似乎您在不正确的位置中添加SinglechildScrollview（）。
您必须将其添加到：

Container(color: Color.fromARGB(255, 255, 252, 234),

以及第二个column（）中。

您可以尝试：

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'aaaa'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  late String title;
  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        children: [
          Row(children: [
            Expanded(
              flex: 1,
              child: SingleChildScrollView(
                child: Container(
                  color: Color.fromARGB(255, 255, 252, 234),
                  margin:
                      const EdgeInsets.only(left: 20.0, top: 20.0, right: 20.0),
                  child: SizedBox(
                    // emulation of block with fixed size content.
                    height: 450,
                  ),
                ),
              ),
            ),
          ]),

          // flex: 5,
          Expanded(
              flex: 2,
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                  ],
                ),
              )),
        ],
      ),
    );
  }
}

结果：

”在此处输入图像描述”

It seems like you're adding the SingleChildScrollView() in the incorrect places.
You have to add it in:

Container(color: Color.fromARGB(255, 255, 252, 234),

and also in your second Column().

You can try:

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'aaaa'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  late String title;
  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        children: [
          Row(children: [
            Expanded(
              flex: 1,
              child: SingleChildScrollView(
                child: Container(
                  color: Color.fromARGB(255, 255, 252, 234),
                  margin:
                      const EdgeInsets.only(left: 20.0, top: 20.0, right: 20.0),
                  child: SizedBox(
                    // emulation of block with fixed size content.
                    height: 450,
                  ),
                ),
              ),
            ),
          ]),

          // flex: 5,
          Expanded(
              flex: 2,
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                    Text("Hello"),
                  ],
                ),
              )),
        ],
      ),
    );
  }
}

Result:

enter image description here

回复 原文
游魂 2025-02-20 09:45:56

更改第二个集团中的列列表视图，然后用灵活的窗口小部件将其包裹起来

Change column in your second Bloc to Listview then wrap it with Flexible instead of Expanded widget

回复 原文
~没有更多了~

关于作者

林空鹿饮溪

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文