Question

我需要创建一个类似Flutter design的应用。

我正在努力将文字放置在想要的位置。到目前为止，这是我的代码

     body: Padding(
    padding: const EdgeInsets.all(0.1),
    child: new Container(
      child: new Center(
       child: new ListView(

          children: <Widget>[

            new Card(//card 1

              child: new Container(
                color: Colors.grey,
                padding: new EdgeInsets.only(
                    left: 160.0, top: 0.01, right: 160.0, bottom: 0.01),
                child: new Column(

                  children: <Widget>[
                    new Text('My Profile')
                  ],
                ),
              ),
            ),

          ],
        ),

      )
    ),
  )

Answer 1

您的160较大的填充使文本看起来像在我的设备上居中。通过将Column设置为crossAxisAlignment，您可以始终将文本CrossAxisAlignment.start的左侧对齐。

此代码应产生与您的图形相似的输出（我还删除了一些不必要的Center，Container和Padding）：

Scaffold(
  appBar: AppBar(),
  body: ListView(
    padding: const EdgeInsets.all(0.1),
    children: <Widget>[
      Card(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              width: double.infinity,
              color: Colors.grey,
              child: Text('My Profile'),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: Text('My text\nMy text\nMy text\nMy text'),
            ),
          ],
        ),
      ),
    ],
  ),
);

我想创建一个具有列表视图的Flutter应用程序

1 个答案: