在flutter中添加图标和对齐文本的问题
在flutter中添加图标和对齐文本的问题
提问于 2021-04-09 02:25:17
几天前我刚刚开始学习flutter，我正在尝试构建一个应用程序。我正在使用卡片作为主页，但我不太确定如何在卡片内添加图标。此外，我对文本的定位也有一些问题。在此附上代码。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(HomeScreen());
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xff3f4040),
appBar: AppBar(
centerTitle: true,
title: Text(
"Test App",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25),
),
toolbarHeight: 50,
actions: [
IconButton(icon: Icon(
Icons.account_circle,
color: Colors.white,
), onPressed: (){})
],
backgroundColor: Colors.black54,
),
body: Container(
margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
width: double.maxFinite,
child: Column(
children: [
Card(
color: Colors.black54,
elevation: 5,
child: Container(
padding: EdgeInsets.fromLTRB(0, 25, 0, 0),
width: double.maxFinite,
height: 90,
child: Column(
children: [
Text(
"Hello",
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w700
),)
],
),
),
),
Card(
color: Colors.black54,
elevation: 5,
child: Container(
padding: EdgeInsets.fromLTRB(0, 25, 0, 0),
width: double.maxFinite,
height: 90,
child: Column(
children: [
Text(
"Hello",
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w700
),)
],
),
),
),
Card(
color: Colors.black54,
elevation: 5,
child: Container(
padding: EdgeInsets.fromLTRB(0, 25, 0, 0),
width: double.maxFinite,
height: 90,
child: Column(
children: [
Text(
"Hello",
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w700
),)
],
),
),
),
],
),
),
));
}
}
这是它现在看起来的屏幕截图。我希望把文本放在左边一点，还添加一个拖尾图标，点击后将重定向到另一个页面。然而，我不太确定如何实现这个结果。如果你能帮我实现同样的目标，我将不胜感激。
回答 2
Stack Overflow用户
发布于 2021-04-09 02:40:23
我已经有一段时间没有使用flutter了，但我认为你可以做的是用一行来代替你现在卡片中的列。然后，可以将文本和图标作为此行的子行放置，这将使它们水平对齐。
您可能希望将行的mainAxisAlignment属性设置为MainAxisAlignment.spaceBetween，这应该在行中的文本和图标之间放置额外的空格，以使文本位于左侧，图标位于右侧。只需确保文本位于行的子项中的图标之前。
Stack Overflow用户
发布于 2021-04-09 03:08:35
你可以很容易地使用ListTile，它为你提供文本和行距，我想你会得到你想要的设计，多亏了这些，你可以用listile添加字幕。我将下面的代码留给您来审阅。
import 'package:flutter/material.dart';
void main() {
runApp(HomeScreen());
}
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
//this code for responsive
final height = MediaQuery.of(context).size.height; // The size of height
final width = MediaQuery.of(context).size.width; // The size of width
return Scaffold(
backgroundColor: Color(0xff3f4040),
appBar: AppBar(
centerTitle: true,
title: Text(
"Test App",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
),
toolbarHeight: 50,
actions: [
IconButton(
icon: Icon(
Icons.account_circle,
color: Colors.white,
),
onPressed: () {})
],
backgroundColor: Colors.black54,
),
body: Container(
margin: EdgeInsets.symmetric(
horizontal: width * 0.1, vertical: height * 0.1),
width: double.infinity,
child: Column(
children: [
Card(
color: Colors.black54,
elevation: 5,
child: ListTile(
leading: IconButton(
icon: Icon(
Icons.person,
color: Colors.white,
),
onPressed: () {
//you can write here navigation own
print('you can write here function own your');
}),
title: Text('Hello Flutter',
style: TextStyle(color: Colors.white, fontSize: 25)),
subtitle: Text(
'-Hi, flutter',
style: TextStyle(color: Colors.white, fontSize: 20),
),
)),
Card(
color: Colors.black54,
elevation: 5,
child: ListTile(
leading: IconButton(
icon: Icon(
Icons.person,
color: Colors.white,
),
onPressed: () {
//you can write here navigation own
print('you can write here function own your');
}),
title: Text('Hello Flutter',
style: TextStyle(color: Colors.white, fontSize: 25)),
subtitle: Text(
'-Hi, flutter',
style: TextStyle(color: Colors.white, fontSize: 20),
),
)),
Card(
color: Colors.black54,
elevation: 5,
child: ListTile(
leading: IconButton(
icon: Icon(
Icons.person,
color: Colors.white,
),
onPressed: () {
//you can write here navigation own
print('you can write here function own your');
}),
title: Text('Hello Flutter',
style: TextStyle(color: Colors.white, fontSize: 25)),
subtitle: Text(
'-Hi, flutter',
style: TextStyle(color: Colors.white, fontSize: 20),
),
)),
],
),
),
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67009819
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号