如何在 Flutter 中做到这一点我是 Flutter 新手，所以如果有人知道

问题描述

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

解决方法

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

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,children: [
                  Expanded(
                    child: getContainer(Colors.yellow),Expanded(
                    child: getContainer(Colors.red),)
                ],],);
  }
}

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

,

所有内容都包含在一行中，第一列将大于第二列，并且小部件 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,)
          ],);
  }
}

,

已解决

**这里是例子**

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"),)
            ],);
  }
}