使用flutter编码要求:1.最上方是logo加名字2.名字和logo下放是2*2分布的四个方形按钮3.没有appbar
时间: 2024-02-23 11:00:24 浏览: 34
实现您的需求,可以使用以下代码:
```
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
Container(
margin: EdgeInsets.only(top: 50),
child: Column(
children: [
Image.asset('assets/logo.png', width: 80, height: 80),
Text('My App', style: TextStyle(fontSize: 24)),
],
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Container(
margin: EdgeInsets.all(20),
child: ElevatedButton(
onPressed: () {},
child: Text('Button 1'),
),
),
),
Expanded(
child: Container(
margin: EdgeInsets.all(20),
child: ElevatedButton(
onPressed: () {},
child: Text('Button 2'),
),
),
),
],
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Container(
margin: EdgeInsets.all(20),
child: ElevatedButton(
onPressed: () {},
child: Text('Button 3'),
),
),
),
Expanded(
child: Container(
margin: EdgeInsets.all(20),
child: ElevatedButton(
onPressed: () {},
child: Text('Button 4'),
),
),
),
],
),
),
],
),
),
);
}
}
```
上面的代码中,我们使用了`Column`和`Row`来布局界面,其中:
- `Column`用于将界面分为两个部分:最上方的 logo 和名字,以及下方的四个方形按钮。
- `Row`用于将下方的四个方形按钮分为两行,每行两个按钮。每个按钮都使用`Expanded`来占据一定的空间,使得它们平分整个屏幕。
注意,我们没有使用`AppBar`,而是直接将界面的顶部留出了一定的空间来显示 logo 和名字。如果您需要在界面中添加标题栏,可以使用`AppBar`来实现。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)