在 Flexible Flutter 中滚动

Question

我希望能够使页面的一部分可滚动，这将在两个固定大小的部分之间，但我希望这个部分尽可能地展开。

我之所以要这个，如果设备很小，滚动就可以，但是如果设备很大，就不需要滚动了。

我正在尝试将 SingleChildScrollView() 放置在 Flexible() 中，以便它尽可能地扩展。

我正在尝试这个但是出现错误

设计是这样的

Answer 1

有几种方法可以做到，你可以用 ListView.builder

class UiMenu extends StatelessWidget {
  const UiMenu({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.blue,
            ),
          ),
          Expanded(
            flex: 8,
            child: Container(
              child: ListView.builder(
                padding: EdgeInsets.all(0.0),
                itemCount: 10,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    margin: EdgeInsets.only(bottom: 2),
                    child: ListTile(
                      leading: Icon(
                        Icons.equalizer_rounded,
                        size: 45,
                      ),
                      title: Text(
                        "Option ${index + 1}",
                        style: Theme.of(context).textTheme.headline6,
                      ),
                      trailing: Icon(
                        Icons.chevron_right,
                        size: 45,
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.orange,
            ),
          )
        ],
      ),
    );
  }
}

在 Flexible Flutter 中滚动

Scroll within a Flexible Flutter

flutter

flutter-layout

flutter-animation