android - 带有滚动元素的固定标题

Question

我是 Flutter 的新手，我正在尝试制作一个简单的屏幕，其中包含 FIXED TITLE 和下方可滚动的“child or Column”，其中包含屏幕截图中的一些元素。 最初会有两个元素，我希望它们位于屏幕中央， 但是当添加第三个元素时，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()),
      ),
    );
  }
}

尝试根据您的需要修改它。希望对您有所帮助:-)