如何让我的 LayoutBuilder 在 appbar 下构建项目？

Question

基本上，我正在尝试为视频通话屏幕复制 UI 设计，我想

了解如何让照片默认显示

例如， 这是我只给一个人打电话的屏幕

目前我可以通过启动多参与者屏幕后向下滚动来达到我想要的 UI 布局，它将进入 AppBar

body.dart代码：

final List<String> images = const [
    "assets/images/girl 1.jpg",
    "assets/images/girl 2.jpg",
    "assets/images/boy 2.jpg",
    "assets/images/boy 1.jpg",
  ];

  Body({
    Key key,
    this.isMultipleParticipants = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        if (!isMultipleParticipants)
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/images/girl 1.jpg"),
                fit: BoxFit.cover,
              ),
            ),
          ),
        if (isMultipleParticipants)
          LayoutBuilder(
            builder: (context, constraint) {
              return new GridView.builder(
                itemCount: 4,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: constraint.maxWidth / constraint.maxHeight,
                ),
                itemBuilder: (context, index) {
                  return Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(images[index]),
                        fit: BoxFit.cover,
                      ),
                    ),
                  );
                },
              );
            },
          ),
        if (!isMultipleParticipants) buildOwnVideo(),
        buildBottomButtons(),
      ],
    );
  }

call_screen.dart代码：

class CallScreen extends StatefulWidget {
  @override
  State<CallScreen> createState() => _CallScreenState();
}

class _CallScreenState extends State<CallScreen> {
  bool _isMultiParticipant = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: buildAppBar(),
      body: Body(
        isMultipleParticipants: _isMultiParticipant,
      ),
    );
  }

  AppBar buildAppBar() {
    return AppBar(
      backgroundColor: Color(0x22000000),
      elevation: 0,
      title:
          Text("Kristin Watson" + (_isMultiParticipant ? " and 4 others" : "")),
      actions: [
        IconButton(
          icon: Icon(_isMultiParticipant
              ? Icons.person_remove_alt_1_outlined
              : Icons.person_add_alt_1_outlined),
          onPressed: () {
            _toggleMode();
          },
        )
      ],
    );
  }

  void _toggleMode() {
    setState(() {
      _isMultiParticipant = !_isMultiParticipant;
    });
  }
}

Answer 1

我在胡思乱想时找到了一个适合我的解决方案，我添加了 EdgeInsets.zero 的填充，它解决了我的问题。

多人关联widget构建方法最终代码如下：

  Widget buildMultiplePhotos() {
    return LayoutBuilder(
      builder: (context, constraint) {
        return new GridView.builder(
          padding: EdgeInsets.zero,
          itemCount: 4,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: constraint.maxWidth / constraint.maxHeight,
          ),
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (context, index) {
            return Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(images[index]),
                  fit: BoxFit.cover,
                ),
              ),
            );
          },
        );
      },
    );
  }

如何让我的 LayoutBuilder 在 appbar 下构建项目？

How to make my LayoutBuilder build items under appbar?

dart

flutter

flutter-layout