以下线框的响应式 UI 应使用哪些小部件？

Question

What widgets should be used to display 3 cartoons at the bottom of this picture and the text at the center responsively for different screen sizes?

Answer 1

Row with spaceEvenly

           return Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                //your images
              ],
            );

https://flutteragency.com/how-to-set-space-between-elements-in-flutter/

Answer 2

There are many ways to do this. It will also depend on what responsive behavior you are looking for. I hope, I understood your specific requirements.

Here is a solution:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AspectRatio(
        aspectRatio: 16 / 9,
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/bg.png"),
              fit: BoxFit.cover,
            ),
          ),
          child: Stack(children: [
            Center(
              child: FractionallySizedBox(
                widthFactor: .4,
                child: FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Text(
                    'Headline text',
                    style: GoogleFonts.chewy(
                      textStyle: const TextStyle(
                        color: Colors.white,
                        letterSpacing: .5,
                      ),
                    ),
                  ),
                ),
              ),
            ),
            Container(
              alignment: const Alignment(0, .75),
              child: FractionallySizedBox(
                widthFactor: .8,
                heightFactor: .3,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Image.asset("assets/images/img1.png"),
                    Image.asset("assets/images/img2.png"),
                    Image.asset("assets/images/img3.png"),
                  ],
                ),
              ),
            )
          ]),
        ),
      ),
    );
  }
}

---

In this solution,

1. I use a main Container that will have your image as background.
2. I then use a Stack to position the headline and the images.
3. The headline is Center ed and defined as a FittedBox inside a FractionallySizedBox . This allows me to have responsivity for the headline too.
4. Finally, for the list of images, I used a FractionallySizedBox to size the list and an aligned Container to position it within the stack. The images are then spread thanks to the use of MainAxisAlignment.spaceBetween .

---

So, as you see, I used the following widgets to responsively size and position my Widgets:

• Position
  • Center
  • Container with the alignment property
• Size
  • FractionallySizedBox