如何在 Flutter 中制作这个我是 Flutter 的新手，所以如果有人知道答案

【问题标题】：How to make this in Flutter i am new in flutter so if anyone knows如何在 Flutter 中制作这个我是 Flutter 的新手，所以如果有人知道
【发布时间】：2021-09-21 13:21:12
【问题描述】：

我想要一排，左边有一张大图，右边有两张图，一张在上，第二张在下。如果有人可以提供帮助，请提前感谢！

【问题讨论】：

标签： flutter dart flutter-layout flutter-design

【解决方案1】：

关键的见解是将布局分解为嵌套的行和/或列。看看这个例子，

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: getContainer(Colors.green),
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Expanded(
                    child: getContainer(Colors.yellow),
                  ),
                  Expanded(
                    child: getContainer(Colors.red),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Widget getContainer(MaterialColor color) =>
    Container(height: 50, width: 50, color: color);

【讨论】：

【解决方案2】：

所有内容都包含在一行中，第一列将大于第二列，小部件 Expanded flex :1。在第二列中，有一个列小部件，您的图像将有两行。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Row(
          children: [
            Expanded(
              child: SizedBox(
                child: Image.asset('your large image'),
              ),
              flex: 1,
            ),
            Expanded(
              child: Column(
                children: [
                  Image.asset('your second image'),
                  Image.asset('your third image'),
                ],
              ),
              flex: 0,
            )
          ],
        ),
      ),
    );
  }
}

【讨论】：

【解决方案3】：

已解决

**这里是示例**

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          // color: Colors.red,
          height: 400,
          width: 400,
          child: Row(
            children: [
              Container(
                child: Image.asset(
                  "assets/images/bgimage.PNG",
                  fit: BoxFit.contain,
                  width: 250.0,
                  // height: 350.0,
                ),
              ),
              SizedBox(
                width: 10.0,
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  SizedBox(
                    height: 10.0,
                  ),
                  Container(
                    child: Image.asset("assets/images/upsm.PNG"),
                  ),
                  Container(
                    child: Image.asset("assets/images/upsm.PNG"),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：