文本在图标旁边的文本

huangapple go评论73阅读模式
英文:

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(&quot;test&quot;),
subtitle: Text(&quot;sad&quot;),
),

</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(&#39;Settings&#39;),
      ),
      body: ListView(
        children: [
          _buildSettingsItem(
            Icons.person,
            &#39;Profile&#39;,
            &#39;Manage your profile&#39;,
            () {},
          ),
          _buildSettingsItem(
            Icons.notifications,
            &#39;Notifications&#39;,
            &#39;Manage your notification settings&#39;,
            () {},
          ),
        ],
      ),
    );
  }

  Widget _buildSettingsItem(
    IconData icon,
    String title,
    String subtitle,
    Function onTap,
  ) =&gt;
      ListTile(
        leading: Icon(icon),
        title: Text(title),
        subtitle: Text(subtitle),
        onTap: onTap,
      );
}

huangapple
  • 本文由 发表于 2023年6月26日 15:37:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/76554501.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定