Question

在我的应用程序中，我有一个综合浏览量，其中有一些网页

如您所见，我想念更多的屏幕尺寸

import 'package:flutter/material.dart';

main() {
  runApp(MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.indigo,
    ),
    home: App(),
  ));
}

class App extends StatefulWidget {
  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverToBoxAdapter(
            child: Column(
              children: <Widget>[
                Container(
                  height: MediaQuery.of(context).size.height,
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(top: 50.0),
                        child: Text(
                          'test text',
                          textAlign: TextAlign.center,
                          style: TextStyle(color: Colors.black),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: PageView(
                          reverse: true,
                          onPageChanged: (i) {},
                          children: <Widget>[
                            ConstrainedBox(
                              constraints: const BoxConstraints.expand(),
                              child: Container(
                                margin: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 12.0),
                                child: Container(
                                  color: Colors.indigo[400],
                                  child: Column(
                                    children: <Widget>[
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('33333333333333')),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                            ConstrainedBox(
                              constraints: const BoxConstraints.expand(),
                              child: Container(
                                margin: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 12.0),
                                child: Container(
                                  color: Colors.indigo[400],
                                  child: Column(
                                    children: <Widget>[
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('33333333333333')),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                            ConstrainedBox(
                              constraints: const BoxConstraints.expand(),
                              child: Container(
                                margin: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 12.0),
                                child: Container(
                                  color: Colors.indigo[400],
                                  child: Column(
                                    children: <Widget>[
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
                                      Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('33333333333333')),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

如何将这个综合浏览量放到可滚动的小部件（如列表视图）中？

当我将其放入listview或expandable时，我会出错

我想吃什么？

ScrollableWidget [容器，网页浏览[page1（），page1（），page3（）]]

Answer 1

也许您必须将listview放在BmiCalculator，RiskCalculator和UserProfileForm内

Answer 2

有一个解决此问题的方法，除了使所有内容都滚动之外，您仅在可见键盘时滚动标题

您需要使用keyboard_visibility插件。

请检查此代码

class FragmentProfile extends StatefulWidget {
  .......

  @override
  State<FragmentProfile> createState() => _FragmentPage();
}

class _FragmentPage extends State<FragmentProfile> {
 ....

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ....
  }
}

class ProfilePage extends StatefulWidget {
  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  .....
  ScrollController _scrollController;
  ....

  @override
  void initState() {
    super.initState();
    .....
    _scrollController = ScrollController();

    KeyboardVisibilityNotification().addNewListener(
      onChange: (bool visible) {
        if(visible){
          final offset = _scrollController.offset;
          print("current offset = ${offset}");
          _scrollController.animateTo(
              offset+50.0,
              duration: Duration(milliseconds: 100),
              curve: Curves.easeIn);
        }else{
          final offset = _scrollController.offset;
          print("current offset = ${offset}");
          _scrollController.animateTo(
              offset-50.0,
              duration: Duration(milliseconds: 100),
              curve: Curves.easeIn);

        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.transparent,

        body: Directionality(
          textDirection: TextDirection.rtl,
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height - 130,
            child: NestedScrollView(
              controller: _scrollController,

                headerSliverBuilder:(BuildContext context, bool innerBoxIsScrolled){
                  return <Widget>[
                    SliverAppBar(
                      title: Component1(),
                      ),
                      centerTitle: true,
                      bottom: _buildMenuBar(context),
                      //pinned: true,
                      floating: true,
                      forceElevated: innerBoxIsScrolled,
                    )
                  ];
                } ,
                body: PageView(
                    controller: _pageController,
                    reverse: true,
                    onPageChanged: (i) {},
                    children: <Widget>[
                      ConstrainedBox(
                        constraints: const BoxConstraints.expand(),
                        child: Container(
                          margin: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 12.0),
                          child: BmiCalculator(),
                        ),
                      ),
                      ConstrainedBox(
                        constraints: const BoxConstraints.expand(),
                        child: ....
                      ),
                      ConstrainedBox(
                        constraints: const BoxConstraints.expand(),
                        child: Directionality(
                          textDirection: TextDirection.rtl,
                          child: Container(
                            margin: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 12.0),
                            child: UserProfileForm(),
                          ),
                        ),
                      ),
                    ],
                  ),
                )
          ),
        ));
  }

  Widget _buildMenuBar(BuildContext context) {
    ....
  }


}

可滚动小部件内的Flutter PageView

2 个答案: