如何在列表视图中居中小部件

我正在纠结于如何将一个小部件集中在 listView中。

我试过了，但是 Text('ABC')不是垂直居中的。 我怎么才能做到呢？

new Scaffold(
appBar: new AppBar(),
body: new ListView(
padding: const EdgeInsets.all(20.0),
children: [
new Center(
child: new Text('ABC')
)
]
)
);
106230 次浏览
小开
最佳答案

垂直中心和水平中心:

Scaffold(
appBar: new AppBar(),
body: Center(
child: new ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(20.0),
children: [
Center(child: new Text('ABC'))
]
),
),
);

只有垂直中心

Scaffold(
appBar: new AppBar(),
body: Center(
child: new ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(20.0),
children: [
new Text('ABC')
]
),
),
);
小开

将小部件打包到容器中

Container(alignment: Alignment.center, ...)

或者

Container(alignment: Alignment.centerLeft, ...)
小开

enter image description here

只需将小部件包装在 Align中，并相应地提供 alignment。

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView( // your ListView
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: _button("Left"),
),
Align(
alignment: Alignment.center,
child: _button("Middle"),
),
Align(
alignment: Alignment.centerRight,
child: _button("Right"),
),
],
),
);
}


Widget _button(text) => RaisedButton(onPressed: () {}, child: Text(text));
}
小开

只需使用 Align 小部件将一个子小部件垂直和/或水平居中:

   Align(
alignment: Alignment.center,
child: Text(
'middle',
),

注意 : 如果您有一个子列，您必须添加:

mainAxisAlignment: MainAxisAlignment.center

到柱子上，使其垂直排列。

小开

在你的 ListView中使用 Align，它将呈现中心的小部件，而且我们不需要给任何对齐属性，因为默认情况下它是中心的

这将在屏幕中心添加 ListView，随着列表项的增加，它将只从中心增长。

   Center(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical, // Axis.horizontal for horizontal list view.
itemCount: 2,
itemBuilder: (ctx, index) {
return Align(child: Text('Text'));
},
),
),

产出:

enter image description here

小开

用 shrinkWrap = true解决这个问题简直就是黑客行为。将小部件集中在 ListView中的关键是启用弹性和滚动。使用 shrinkWrap并不能做到这一点，它看起来是正确的，但它的行为完全错误。

解决方案是在 ListView中放置一个 Container作为唯一的子元素，并给它一个最小高度等于高度的可用空间(使用 LayoutBuilder来测量小部件的最大高度)。然后，作为 Container的子代，您可以放置一个 Center或 Column(使用 MainAxisAlignment.center)小部件，从那里您可以添加您想要居中的任何小部件。

下面是解决问题中示例的代码:

Scaffold(
appBar: AppBar(),
body: LayoutBuilder(
builder: (context, constraints) => ListView(
children: [
Container(
padding: const EdgeInsets.all(20.0),
constraints: BoxConstraints(
minHeight: constraints.maxHeight,
),
child: Center(
child: Text('ABC'),
),
)
],
),
),
);
小开

如果您需要中间的项目滚动，然后执行以下操作。

Center(
child: ListView(
shrinkWrap: true,
children: [
// the container with height will make the screen scroll
Container(
height:
MediaQuery.of(context).size.height / 1.2,
child: Text('ABC'),
),
],
),
),

提示: 给容器一个颜色来可视化可以滚动的区域

小开 
    Scaffold(
backgroundColor: Color.fromARGB(255, 238, 237, 237),
body: Center(
child: Container(
child: Column(
children: <Widget>[
Column(children: <Widget>[
Image.asset(
'images/logo.png',
fit: BoxFit.contain,
width: 130,
)
]),
Column(children: <Widget>[
RaisedButton(
onPressed: () => {},
child: TextStyle_Title(
text: 'سلاااام',
),
)
]),
],
),
),
),
)
小开

在列表视图中添加此容器

Container(
height: MediaQuery.of(context).size.height / 1.2,
child: Center(
child: Text(
"No Record Found",
style: TextStyle(fontSize: 20, color: Colors.black),
),
),
),
小开 
    child: ListView.builder(
shrinkWrap: true,
itemCount: Doctor.listOfDoctors.length,
itemBuilder: (BuildContext context, int index) {
String name = Doctor.listOfDoctors[index].name;
String details = Doctor.listOfDoctors[index].info;
//better for design is to use ListTile instead of Text Widget
return ListTile(
title: Text(
name,
//this is how I solved this issue ;)
**textAlign: TextAlign.center,**
),

提交答案