Flutter 自定义 UI 可滚动

Question

我想在 x 和 y 两个方向上滚动。例如：左角有框列表，底部有框列表，左角列表中编号为 1 2 3，然后在底部 4 5 6 7，当我们在左侧列表滚动时，它应该向下滚动并在底部列表开始逐个移出屏幕，反之亦然。

Answer 1

根据您的要求 ListItems 将在 x 和 y 方向滚动，这可以通过将 ListView 嵌套在 ListView 中来实现。

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  var _container = Container(
      height: 200, // give it a fixed height constraint
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemBuilder: (_, i) => SizedBox(
              width: 200,
              height: 200,
              child: Container(
                child: Padding(
                  child: Container(
                    child: Center(child: Text("Item $i")),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: new BorderRadius.only(
                          bottomLeft: new Radius.circular(50.0),
                          topRight: Radius.circular(50.0)),
                      boxShadow: [
                        new BoxShadow(
                          color: Color(0Xff0f0f0f),
                          offset: new Offset(-3.0, 3.0),
                        )
                      ],
                      gradient: LinearGradient(
                        colors: [Color(0xFFcc2b5e), Color(0xFF753a88)],
                      ),
                    ),
                  ),
                  padding: EdgeInsets.all(5),
                ),
              ))));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView(
          // parent ListView
          children: <Widget>[
            _container,
            _container,
            _container,
            _container,
            _container,
          ],
        ),
      ),
    );
  }
}