修复了带滚动元素的标题

Question

我是新手，我正在尝试制作简单的一个屏幕，其中包含FIXED TITLE，并且在屏幕下方可以使用少量元素进行可缩放的“子或列”。最初会有两个元素，我希望它们位于屏幕的中心，但是当添加第三个元素时，scrollview需要为较小的屏幕启动，因此标题保持固定但元素可以扫描。这里是滚动所有包括标题的当前代码。提前致谢：

  @override
  Widget build(BuildContext context) {
    return Container(

      color: Color.fromRGBO(246, 246, 246, 1.0),
      child: SafeArea(
          child: Material(


            child: Center(
              child: SingleChildScrollView(
                child: Column(

                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Center(
                      child: Padding(
                        padding: EdgeInsets.only(top: 20.0,bottom: 20.0),

                        child: Text(
                          'Lorem Ipsum',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              color: Color.fromRGBO(78, 53, 43, 1.0),
                              fontSize: 40.0,                            
                              fontWeight: FontWeight.w300),
                        ),
                      ),
                    ),

                    _item(context, 'ITEM_1', 'Title1', 'ico_01.png'),
                    _item(context, 'ITEM_2', 'Title2', 'ico_02.png'),
                    _thirdItem
                        ? _item(
                        context, 'ITEM_3', 'Title3', 'ico_03.png')
                        : Container(),

                  ],
                ),
              ),
            ),
          )),

    );
  }

Answer 1

此示例应演示如何获得固定标题。请注意，Column的mainAxisSize设置为MainAxisSize.max，SingleChildScrollView包含在Flexible中，这导致SingleChildScrollView占用剩余空间并启用滚动。

class FixedTitleScrollView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Align(
          alignment: Alignment.center,
          child: Text(
            'Fixed Title',
            style: TextStyle(
                color: Color.fromRGBO(78, 53, 43, 1.0),
                fontSize: 40.0,
                fontWeight: FontWeight.w300),
          ),
        ),
        Flexible(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                _item(),
                _item(),
                _item(),
                _item(),
                _item(),
                _item(),
                _item(),
                _item(),
                _item(),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _item() {
    Color color = Color(Random().nextInt(0xffffffff));
    return Container(
      color: color,
      height: 300,
      width: 300,
      child: Align(
        alignment: Alignment.center,
        child: Text(color.toString()),
      ),
    );
  }
}

尝试根据您的需要进行修改。希望能帮助到你 ：-）