如何解决如何在 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"),)
],);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。