【问题标题】:Flutter: Scroll bar within a container in Flutter webFlutter:Flutter web 中容器内的滚动条
【发布时间】:2021-07-27 01:31:26
【问题描述】:

我想在 Flutter web 的固定大小容器中添加滚动条,如下图链接所示。谁能给我这方面的建议?我被困在这里。我尝试过使用 Flutter_web_scrollbar 的单子滚动视图,但它不起作用。这是代码。

Container(
                width: 300,
                child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  controller: _bcontroller,
                  child: Column(
                    children: [
                      Container(
                        width: 300,
                        child: Row(
                          children: [
                            Text(
                              '${eventList.length > 0 ? i['ShipName'] : ''}',
                            
                            ),
                          ],
                        ),
                      ),
                      Container(
                        width: 300,
                        child: Row(
                          children: [
                            Text(
                              '${eventList.length > 0 ? i[getEventDesc()].toString() : ''}',
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                    ],
                  ),
                ),
              )

Example

【问题讨论】:

    标签: flutter flutter-web


    【解决方案1】:

    用滚动条小部件包装 SingleChildScrollView。

    import 'package:flutter/material.dart';
    
    final 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: Scaffold(
            body: Center(
              child: MyWidget(),
            ),
          ),
        );
      }
    }
    
    class MyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
                width: 300,
          height: 200,
        child: Scrollbar(
                 child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  child: Column(
                    children: [
                      Container(
                        width: 300,
                        height: 100,
                        child: Row(
                          children: [
                            Text(
                              'your variable',
                            
                            ),
                          ],
                        ),
                      ),
                      Container(
                        width: 300,
                        height: 100,
                        child: Row(
                          children: [
                            Text(
                              'your variable',
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                    ],
                  ),),
                ),
              );
      }
    }
    

    【讨论】:

    • 谢谢,但我已经尝试过您的解决方案,但它不起作用
    • 我编辑了代码,现在试试。容器高度必须小于总高度。
    猜你喜欢
    • 1970-01-01
    • 2011-08-02
    • 1970-01-01
    • 1970-01-01
    • 2010-10-23
    • 1970-01-01
    • 2015-08-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多