Question

我是扑朔迷离的新手，我想制作一个简单的屏幕，带有FIXED TITLE（固定标题），并在其下方可滚动显示“ child or Column”（子或列），其中没有几个元素，如屏幕截图所示。最初会有两个元素，我希望它们位于屏幕中央，但是，当添加第三个元素时，需要在较小的屏幕上滚动滚动视图，因此标题保持不变，但元素可伸缩。这是当前代码，其中滚动了包括标题在内的所有内容。预先感谢：

  @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

此示例应演示如何具有固定标题。请注意，该列的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()),
      ),
    );
  }
}

尝试根据您的需要进行修改。希望对您有所帮助：-）

带有滚动元素的固定标题

1 个答案: