Flutter 卡片列对齐和文本居中
Posted
技术标签:
【中文标题】Flutter 卡片列对齐和文本居中【英文标题】：Flutter card column alignment and text centering 【发布时间】：2019-07-23 18:23:40 【问题描述】：基本上我正在构建一个列表视图。所以我正在使用卡片，我想要实现的是在卡片中我想划分一个部分来为列着色，另外一个部分我想写一个我希望它居中的文本，但我尝试了很多选项不能达到。
下面是我想为颜色列实现的屏幕截图，但我希望文本居中。
我所取得的成果如下
我注意到我的颜色没有完全覆盖在它外面有一些白色元素。以下是我为实现它所做的全部代码。
我想解决的问题如下
1) To make the color column look clean and neat as the image above because now I tried to adjust its height slight smaller than the card height which is 35
2) The text to be centered
3) The gesture to detect the whole of the text column
4) I have other design where it might have 3 or more column and how to build a separator
5) I have set the card width: 30.0, but it always goes right till the end it never stays at 30.
new Container(
height:190,
child:
new ListView.builder(
shrinkWrap: true,
itemCount: vdata.length,
itemBuilder: (BuildContext ctxt, int index)
return Container(
margin: new EdgeInsets.fromLTRB(10, 0, 10, 0),
width: 30.0,
height: 35.0,
child: Card(
color: Colors.white,
child: Row (
//mainAxisSize: MainAxisSize.max,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
decoration: new BoxDecoration(
color: Colors.amber,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(5),
bottomLeft: const Radius.circular(5)
),
),
height: 27,
width: 10,
),
],
),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
//mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//new Row(
// mainAxisSize: MainAxisSize.max,
//children: <Widget>[
new GestureDetector(
onTap: ()
setState(()
_localVehicleSelected=vdata[index]["pr"].toString();
);
doSomething(vdata[index]["pr"].toString());
,
child:new Text('Test Plate',
),
),
//style: Theme.of(context).textTheme.body2
//],
//),
],
),
],
),
)
);
根据回答尝试的屏幕截图。
【问题讨论】：
【参考方案1】：你需要使用卡片形状来获得你想要的东西，另外你需要使用 -crossAxisAlignment: CrossAxisAlignment.center, 将元素居中排列
Container(
height: 190,
child: new ListView.builder(
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext ctxt, int index)
return Container(
margin: new EdgeInsets.fromLTRB(10, 0, 10, 0),
width: 25.0,
height: 55.0,
child: Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)),
color: Colors.white,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.amber,
width: 10,
),
SizedBox(
width: 10.0,
),
Expanded(
child: GestureDetector(
onTap: ()
print('testing');
// setState(()
// _localVehicleSelected =
// vdata[index]["pr"].toString();
// );
//
// doSomething(vdata[index]["pr"].toString());
,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//new Row(
// mainAxisSize: MainAxisSize.max,
//children: <Widget>[
new Text(
'Test Plate',
),
//style: Theme.of(context).textTheme.body2
//],
//),
],
),
),
),
],
),
));
))
【讨论】：
我得到一个奇怪的形状，有两列琥珀色，并且没有测试板字。 但是如果你看到你的测试板也向左对齐，如何将测试板置于中心 我用最新的屏幕截图更新了我的问题。您可以尝试缩小宽度，因为我实际上是在底部工作表中调用它，所以很多列表项 55 太大，所以我下降到 30 并将尺寸框和容器宽度调整为 5。但是测试的问题板仍未居中。 对不起，我希望它居中。此外，如果我的宽度更小，我仍然可以获得漂亮的颜色列。我已经更新了我的问题，你可以查看吗 好的，我看到你更新后的回答 crossAxisAlignment: CrossAxisAlignment.center，现在解决了我的居中问题我希望我的宽度更小，并且颜色列看起来很漂亮，比如宽度为 30。我应该更改哪些设置我试过容器大小的盒子，但不是很清楚以上是关于Flutter 卡片列对齐和文本居中的主要内容，如果未能解决你的问题，请参考以下文章
如何左对齐 Flutter 中的 OutlineButton 图标