flutter 实现首页,左右布局,左边一张图片,右边上下布局,两行文字下面是一个按钮,按钮挺好看
时间: 2024-03-17 13:44:45 浏览: 84
可以使用 Flutter 的 Row 和 Column Widget 来实现左右布局和上下布局,然后使用 Container 和 Image Widget 来实现图片和按钮的布局。下面是一个简单的示例代码:
```dart
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Row(
children: [
Container(
width: 150,
height: double.infinity,
child: Image.network(
'https://picsum.photos/200',
fit: BoxFit.cover,
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Title',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 10),
Text(
'Subtitle',
style: TextStyle(
fontSize: 16,
color: Colors.grey,
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding: EdgeInsets.symmetric(
horizontal: 40,
vertical: 16,
),
textStyle: TextStyle(fontSize: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
],
),
),
),
],
),
);
}
}
```
在这个示例中,我们使用了 Row 和 Column Widget 来实现左右布局和上下布局,使用了 Container 和 Image Widget 来实现图片的显示,使用了 ElevatedButton Widget 来实现按钮的布局。你可以根据自己的需要修改布局和样式。
阅读全文