flutter - 如何在列和行中进行颤动布局?
问题描述
我刚开始学习颤振,我在制作如下图的布局时遇到问题,制作布局的代码在此处输入图像描述
这是我的代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
height: 100.0,
color: Colors.white,
child: Text('Container 1'),
),
SizedBox(
height: 20.0,
),
Container(
height: 100.0,
color: Colors.blue,
child: Text('Container 2'),
),
SizedBox(
height: 20.0,
),
Container(
height: 100.0,
color: Colors.red,
child: Text('Container 3'),
),
],
),
),
),
);
}
}
从我编写的代码来看,与我预期的完全不同,请帮助,我是新手,我想提前一步让我的技能变得更好。谢谢...
解决方案
我只是将您的Column
小部件转换为Row
并在其中添加一个中心小部件,然后在其中Expand
添加Column
小部件。
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.red,
height: 100.0,
width: 100.0,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.yellow,
height: 100.0,
width: 100.0,
),
Container(
color: Colors.green,
height: 100.0,
width: 100.0,
)
],
),
),
Container(
color: Colors.blue,
height: 100.0,
width: 100.0,
),
],
),
推荐阅读
- reactjs - Material UI Autocomplete - 选择项目后禁用列表框
- java - 找不到 SpringBoot bCryptPasswordEncoder bean
- python - 1970-01-01 00:00:00.000002000
- reactjs - Redux 设置状态
- php - 无法在php中更新数组的值
- node.js - 如果用户提及超过 5 人,则禁止用户
- firebase - 如何在 Firestore 中的 3 个单独的经过身份验证的用户之间共享数据?
- java - Lucene 如何在 StandardAnalyzer 中关闭“toLowerCase”?
- typescript - Mongoose 仅拉取数组内数组中的单个字符串
- javascript - 获取 json 数据 - javascript 到 python 服务器