英文:
Text under text next to an icon
问题
I have a problem. I want to create a setting UI. Unfortunately my does not look like what I want.
我有一个问题。我想创建一个设置界面。不幸的是,我的界面不像我想要的样子。
I want on the left side an icon and on the right side of the icon there should be a text and below another small text.
我希望在左侧有一个图标,图标的右侧应该有一段文本,下方还有另一小段文本。
Unfortunately if I am running my code it does not look like. The first container is over the complete page - so how could I create the design?
不幸的是,如果我运行我的代码,它的样子不对。第一个容器覆盖了整个页面 - 那么我该如何创建这个设计?
英文:
I have a problem. I want to create a setting UI. Unfortunately my does not look like what I want.
I want on the left side an icon and on the right side of the icon there should be a text and below another small text.
Unfortunately if I am running my code it does not look like. The first container is over the complete page - so how could I create the design?
class SettingRoute extends StatefulWidget {
const SettingRoute({Key? key}) : super(key: key);
@override
State<SettingRoute> createState() => _SettingRoute();
}
class _SettingRoute extends State<SettingRoute> {
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
//print("called");
return Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.black,
systemOverlayStyle:
const SystemUiOverlayStyle(statusBarColor: Colors.black),
leading: IconButton(
icon: Image.asset('assets/logo.png'),
onPressed: null,
),
title: Text("My App",
style: const TextStyle(color: Colors.white),
textAlign: TextAlign.center)),
body: Container(
margin: const EdgeInsets.all(30.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: const BorderRadius.all(
Radius.circular(5.0) // <--- border radius here
),
color: Colors.white,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
margin:
const EdgeInsets.only(left: 12.0, top: 12.0, bottom: 12.0),
child: const Icon(
Icons.access_time,
color: Colors.black,
size: 50.0,
),
),
/*Container(
margin:
const EdgeInsets.only(left: 6.0, top: 12.0, bottom: 12.0),
child: const Text(
"Last change",
style: TextStyle(color: Colors.black, fontSize: 12),
),
),*/
Container(
padding: EdgeInsets.all(20),
child: Column(
children: [
const Text("test"),
Container(height: 20), //space between text field
const Text("sad"),
],
),
),
]),
),
);
}
}
答案1
得分: 2
以下是翻译好的部分:
对于这种设计通常使用`ListTile`。将您的`Row`替换为
```dart
const ListTile(
leading: Icon(
Icons.access_time,
color: Colors.black,
size: 50.0,
),
title: Text("test"),
subtitle: Text("sad"),
),
<details>
<summary>英文:</summary>
For this kind of design a `ListTile` is typically used. Replace your `Row` with
const ListTile(
leading: Icon(
Icons.access_time,
color: Colors.black,
size: 50.0,
),
title: Text("test"),
subtitle: Text("sad"),
),
</details>
# 答案2
**得分**: 1
为什么你不使用 `ListTile`?
```dart
class SettingsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Settings'),
),
body: ListView(
children: [
_buildSettingsItem(
Icons.person,
'Profile',
'Manage your profile',
() {},
),
_buildSettingsItem(
Icons.notifications,
'Notifications',
'Manage your notification settings',
() {},
),
],
),
);
}
Widget _buildSettingsItem(
IconData icon,
String title,
String subtitle,
Function onTap,
) =>
ListTile(
leading: Icon(icon),
title: Text(title),
subtitle: Text(subtitle),
onTap: onTap,
);
}
英文:
Why you are not using ListTile
?
class SettingsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Settings'),
),
body: ListView(
children: [
_buildSettingsItem(
Icons.person,
'Profile',
'Manage your profile',
() {},
),
_buildSettingsItem(
Icons.notifications,
'Notifications',
'Manage your notification settings',
() {},
),
],
),
);
}
Widget _buildSettingsItem(
IconData icon,
String title,
String subtitle,
Function onTap,
) =>
ListTile(
leading: Icon(icon),
title: Text(title),
subtitle: Text(subtitle),
onTap: onTap,
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论