英文:
Text placed is center with using center widget
问题
没有使用中心小部件，但标题“Daily”仍然位于中心。如何实现？
下面提供的代码是应用程序UI的代码，如图所示。
CarouselSlider用于水平滑动。
代码:
CarouselSlider(
items: [
Column(
children: [
Container(
child: Text("Daily", style: TextStyle(color: Colors.white, fontSize: 20)),
),
Expanded(
child: SingleChildScrollView(
child: Container(
margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Text(data['daily'], textAlign: TextAlign.justify, style: TextStyle(color: Colors.white, fontSize: 17)),
)),
),
],
),
Column(
children: [
Container(
child: Text("Weekly", style: TextStyle(color: Colors white, fontSize: 20)),
),
Expanded(
child: SingleChildScrollView(
child: Container(
margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Text(data['weekly'], textAlign: TextAlign.justify, style: TextStyle(color: Colors.white, fontSize: 17)),
)),
),
],
),
],
options: CarouselOptions(
height: MediaQuery.of(context).size.height - 300,
enlargeCenterPage: true,
initialPage: 0,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: false,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 1,
),
);
在这个代码中，CarouselSlider包含两个Column小部件，每个Column包含一个标题和文本。CarouselSlider的enlargeCenterPage选项设置为true，这会使当前居中的项放大，从而创建了标题“Daily”位于中心的效果。
英文:
Question: No center widget is used, still the title "Daily" is the center. How?
The code provided below is the of the UI of the app as shows in the image.
CarouselSlider is used to slide horizontally.
Code:
CarouselSlider(
items: [
Column(
children: [
Container(
child: Text("Daily", style: TextStyle(color: Colors.white, fontSize: 20)),
),
Expanded(
child: SingleChildScrollView(
child: Container(
margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Text(data['daily'], textAlign: TextAlign.justify, style: TextStyle(color: Colors.white, fontSize: 17 )),
)),
),
],
),
Column(
children: [
Container(
child: Text("Weekly", style: TextStyle(color: Colors.white, fontSize: 20)),
),
Expanded(
child: SingleChildScrollView(
child: Container(
margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Text(data['weekly'], textAlign: TextAlign.justify, style: TextStyle(color: Colors.white, fontSize: 17 )),
)),
),
],
),
],
options: CarouselOptions(
height: MediaQuery.of(context).size.height-300,
enlargeCenterPage: true,
initialPage: 0,
aspectRatio: 16/9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: false,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 1,
),
);
答案1
得分: 2
你可以使用columns axisAlignments来更改这些
Column(
crossAxisAlignment : CrossAxisAlignment.start
)
英文:
You can change those with columns axisAlignments
Column(
crossAxisAlignment : CrossAxisAlignment.start
)
答案2
得分: 2
发生这种情况是因为Column和crossAxisAlignment的默认设置是center，你可以像这样覆盖它：
Column(
crossAxisAlignment: CrossAxisAlignment.start, // <=== 添加这行
children: [
Container(
child: Text("Daily",
style: TextStyle(color: Colors.white, fontSize: 20)),
),
...
],
),
更多关于crossAxisAlignment的信息。
英文:
This happened because of the default setting of Column and crossAxisAlignment which by default set to center, you can override it like this:
Column(
crossAxisAlignment: CrossAxisAlignment.start, // <=== add this
children: [
Container(
child: Text("Daily",
style: TextStyle(color: Colors.white, fontSize: 20)),
),
...
],
),
more about crossAxisAlignment
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论