在堆栈下方添加小部件

Question

如何在卡片下方（圆圈部分）添加小部件？

 @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: 
      Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Container(
              height: 250,
              color: Colors.orange,
              child: Padding(
                  padding: EdgeInsets.all(16),
                  child: Text(
                    "Report",
                    style: TextStyle(color: Colors.white, fontSize: 25),
                  )),
            ),
          ),
          Positioned(
            top: 80,
            left: 24,
            right: 24,
            child: Card(
              clipBehavior: Clip.antiAliasWithSaveLayer,
              child: Container(
                child: Padding(
                    padding: EdgeInsets.all(10),
                    child: GridView.count(
                      childAspectRatio: 3 / 2,
                      padding: EdgeInsets.symmetric(vertical: 0),
                      shrinkWrap: true,
                      physics: new NeverScrollableScrollPhysics(),
                      children: [
                        Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            IconButton(
                                color: const Color(0xff000066),
                                onPressed: () {},
                                icon: Icon(Icons.analytics_outlined)),
                            Text(
                              "Report A",
                              style: TextStyle(color: const Color(0xff000066)),
                            ),
                          ],
                        ),
                        Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            IconButton(
                              color: const Color(0xff000066),
                              icon: Icon(Icons.report_problem_outlined),
                              onPressed: () {},
                            ),
                            Text(
                              "Report B",
                              style: TextStyle(color: const Color(0xff000066)),
                            ),
                          ],
                        ),
                        Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            IconButton(
                              color: const Color(0xff000066), 
                              icon: Icon(Icons.report),
                              onPressed: () {},
                            ),
                            Text("Report C",
                                style:
                                    TextStyle(color: const Color(0xff000066))),
                          ],
                        ),
                        Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            IconButton(
                                color:const Color(0xff000066), 
                                icon: Icon(Icons.work),
                                onPressed: () {}),
                            Text("Report D",
                                style:
                                    TextStyle(color: const Color(0xff000066))),
                          ],
                        ),
                      ],
                      crossAxisCount: 2,
                    )),
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }

我应该继续使用Positioned 还是有其他更好的选择？

Answer 1

您可以将您的卡片和以下小部件放在一个列中：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: Container(
                height: 250,
                color: Colors.orange,
                child: Padding(
                    padding: EdgeInsets.all(16),
                    child: Text(
                      "Report",
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    )),
              ),
            ),
            Positioned(
              top: 80,
              left: 24,
              right: 24,
              child: Column(
                children: [
                  Card(...),
                  const SizedBox(height: 16.0),
                  Container(
                    color: Colors.amber.shade300,
                    padding: EdgeInsets.all(16.0),
                    child: Text('My other widget.'),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

您可以将column 用于底部的小部件，并根据您的需要提供padding。然后你就可以像往常一样继续编程了。