时间戳

首页 > 解决方案 > 当按钮被放置在 ListView.builder 小部件中时，它们的子元素居中

flutter - 当按钮被放置在 ListView.builder 小部件中时，它们的子元素居中

问题描述

为什么 Flutter 中的按钮在放置在列表视图中时倾向于将其子元素对齐到中心？

例如：

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index){
        return MaterialButton(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("Hello"),
              ],
            ));
      }
      ),
    );
  }
}

这将导致十个 hello 按按钮的默认高度均匀分布，但它们会居中；即使我CrossAxisAlignment.start在列中使用了该属性。

这是图像：

在此处输入图像描述

但是，当我将 MaterialButton 替换为 Container 时，它们会根据需要与列的开头对齐。

当我删除时，ListView.Builder我会得到与开头对齐的“你好”。

其余按钮也会发生同样的事情。有没有办法让列表视图中的按钮没有居中的孩子？

编辑：该示例由@Harry 修复，但它没有修复我的确切代码

这是我的代码：我尝试在外面创建一个小部件列表并使用一个函数将我的列表项添加到该列表中并通过ActivitiesList小部件返回一个列表视图

import 'package:flutter/material.dart';
import 'package:list_them_out/models/activities.dart';
import 'package:provider/provider.dart';

class ActivitiesList extends StatefulWidget {
  @override
  _ActivitiesListState createState() => _ActivitiesListState();
}

double conBorderRadius = 30;

class _ActivitiesListState extends State<ActivitiesList> {
  List<Widget> itemData = [];

  void getData(context) {
    double cardHeight = MediaQuery.of(context).size.height * 0.3;
    double cardWidth = MediaQuery.of(context).size.width * 0.97;
    final activities = Provider.of<List<Activity>>(context);

    activities == null
    // ignore: unnecessary_statements
        ? null
        : setState(() {
      itemData = [];
    });

    activities == null
    // ignore: unnecessary_statements
        ? null
        : setState(() {
      activities.forEach((element) {
        itemData.add(Padding(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Container(
              width: cardWidth,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(conBorderRadius),
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: <Color>[
                      Colors.lightGreen[300],
                      Colors.lightBlue[300],
                    ]
                  ),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.grey[600],
                        offset: Offset(4.0, 4.0),
                        blurRadius: 15,
                        spreadRadius: 1),
                    BoxShadow(
                        color: Colors.white,
                        offset: Offset(-4.0, -4.0),
                        blurRadius: 15,
                        spreadRadius: 1),
                  ]),
              child: Stack(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(conBorderRadius),
                    child: MaterialButton(
                      splashColor: HSLColor.fromColor(Colors.green).toColor(),
                      onPressed: () {},
                      child: Align(
                        alignment: Alignment.centerLeft,
                        child: Container(
                            child: Padding(
                              padding: EdgeInsets.only(top: 20),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Container(
                                    width: cardWidth * 0.61,
                                    child: Text(
                                      element.name,
                                      maxLines: 2,
                                      overflow: TextOverflow.ellipsis,
                                      style: TextStyle(
                                        color: Colors.grey[600],
                                        fontSize: 25,
                                        fontWeight: FontWeight.w500,
                                        letterSpacing: 1,
                                      ),
                                    ),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.only(top: cardHeight * 0.09, left: cardWidth * 0.03),
                                    child: Container(
                                      width: cardWidth * 0.48,
                                      child: RichText(
                                        maxLines: 2,
                                        overflow: TextOverflow.ellipsis,
                                        text: TextSpan(children: [
                                          TextSpan(
                                            text: "Start: ",
                                            style: TextStyle(
                                                color: Colors.grey[800],
                                                fontSize: 20,
                                                fontWeight: FontWeight.w400,
                                                letterSpacing: 1),
                                          ),
                                          TextSpan(
                                              text: element.time,
                                              style: TextStyle(
                                                color: Colors.black87,
                                                fontWeight: FontWeight.w300,
                                                fontSize: 20,
                                              ))
                                        ]),
                                      ),
                                    ),
                                  ),
                                  SizedBox(height: cardHeight * 0.06,),
                                  Row(
                                    children: [
                                      IconButton(icon: Icon(Icons.comment),
                                        onPressed: () => null,
                                        color: Colors.grey[600],
                                      ),
                                      Padding(
                                        padding:  EdgeInsets.only(bottom: 5),
                                        child: Text("Comments", style: TextStyle(color: Colors.grey[600], fontSize: 20, fontWeight: FontWeight.w300, letterSpacing: 1),),
                                      )
                                    ],
                                  )
                                ],
                              ),
                            ),),
                      ),
                    ),
                  ),
                  Positioned(
                    right: 0,
                    bottom: 0,
                    top: 0,
                    child: ClipPath(
                      clipper: MyClip(radius: conBorderRadius),
                      child: Container(
                        height: cardHeight,
                        width: cardWidth * 0.45,
                        decoration: BoxDecoration(
                            gradient: LinearGradient(
                                begin: Alignment.topLeft,
                                end: Alignment.bottomRight,
                                colors: <Color>[
                                  Colors.grey[300],
                                  Colors.lightBlue[100].withOpacity(0.5)
                                ])),
                        ),
                      ),
                    ),
                  Positioned(
                    right: cardWidth * 0.05,
                    bottom: 20,
                    child: Container(
                      child: Text("Hello"),
                    ),
                  )
                ],
              )),
        ));
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    double listHeight = MediaQuery.of(context).size.height * 0.86;
    double listWidth = MediaQuery.of(context).size.width * 0.97;

    getData(context);

    return ClipRRect(
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(50), topLeft: Radius.circular(50)),
        child: Container(
          height: listHeight,
          width: listWidth,
          child: ListView.builder(
              itemCount: itemData.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: EdgeInsets.only(bottom: 30),
                  child: itemData[index],
                );
              }),
        ));
  }
}

``

标签： flutterdart

解决方案

尝试使用对齐小部件。只需使用 align 小部件包装列并将对齐参数设置为alignment。中左。

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index){
        return MaterialButton(
            child: Align(
                child:Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                        Text("Hello"),
                    ],
                ),
                alignment: Alignment.centerLeft,
            )
        );
      }
      ),
    );
  }
}

推荐阅读